Vue中快速使用腾讯云存储桶

469 阅读1分钟

     如果带宽不行,上传一个文件需要很长时间,导致用户体验太差,解决这个问题是将文件上传到阿里云或者腾讯云上,拿到URL,这样做速度快。在Vue项目中快速注册使用腾讯云,并将数据上传到云端服务器。

1. 点击控制台

1.jpg

2. 对象存储

2.jpg

3. 创建储存桶

3.jpg

4. 输入相关信息—公有读私有写

4.jpg

5. 下一步

5.jpg

6. 检查信息 创建

6.jpg

7. 在API管理里新建密钥—SecretId和SecretKey

console.cloud.tencent.com/cam/capi 8.jpg

8. 跨域访问CORS设置 添加规则

7.jpg

9. 点击保存

9.jpg

10. 在文档—JS SDK中查看快速使用

cloud.tencent.com/document/pr… 10.jpg 11.jpg

11. webpack输入

控制台输入:npm i cos-js-sdk-v5 --save 12.jpg

12. 上传图片

<template>
  <div>
    <input type="file" accept="image/jpeg,image/jpg,image/png,image/gif" @change="upload">
    <img :src="src" alt="">
  </div>
</template>

<script>
 import COS from 'cos-js-sdk-v5'
 var cos = new COS({
 SecretId: '',
 SecretKey: '',
 })
export default {
  props: {},
  data() {
    return {
      src:'',
    };
  },
  methods: {
    async upload(e){
      console.dir(e.target.files[0])
      const res=await cos.uploadFile({
        Bucket: '', /* 填写自己的 bucket,必须字段 */
        Region: '',     /* 存储桶所在地域,必须字段 */
        Key: Date.now() + e.target.files[0].name,              /* 存储在桶里的对象键(例如1.jpg,a/b/test.txt),必须字段 */
        Body: e.target.files[0], // 上传文件对象
        SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,超过5MB 使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */
      });
      console.log(res)
      this.src='https://' + res.Location
    },
  }
};
</script>

<style scoped>
</style>

Bucket和Region见下图 14.jpg 13.jpg 19.jpg

13. 查看已上传的文件

17.jpg 18.jpg