Vue图片上传腾讯存储桶

需要安装插件 

npm i cos-js-sdk-v5 --save

不需要后端服务器，前端直接上传

 element 图片上传组件

<el-upload
        :on-preview="preview"
        :on-remove="handleRemove"
        :on-change="changeFile"
        :before-upload="beforeUpload"
        :file-list="fileList"
        list-type="picture-card"
        action="#"
        :limit="1"
        :class="{ disabled: fileComputed }"
        :http-request="upload"
      >
        <i class="el-icon-plus" />
      </el-upload>

 import COS from "cos-js-sdk-v5"; 引入一下  cos腾讯

  var cos = new COS({

     //腾讯云的id和密码

    SecretId: "*******", // 身份识别 ID

    SecretKey: " ******", // 身份密钥

  });

 data() {
      return {
        fileList: [], // 图片地址设置为数组
        showDialog: false, // 控制显示弹层
        imgUrl: "",
        currentFileUid: null, //确定上传图片的id
        showPercent: false, //状态加载条
        percent: 0,//进度条加载过程
      };
    },

然后调用方法

 upload(params) {
        //   console.log(params.file)
        if (params.file) {
          // 执行上传操作
          cos.putObject(
            {
              Bucket: "image-1316300210", // 存储桶
              Region: "ap-beijing", // 地域
              Key: params.file.name, // 文件名
              Body: params.file, // 要上传的文件对象
              StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可
              // 上传到腾讯云 =》 哪个存储桶 哪个地域的存储桶 文件  格式  名称 回调
             },
            (err, data) => {
              // 这个回调需要使用箭头函数，因为currentFileUid在当前组件实例对象上，
              //箭头函数没有this,会继承upload方法的this，它的this执行vue组件实例
  
              // data中有一个statusCode === 200 的时候说明上传成功
              if (!err && data.statusCode === 200) {
                console.log(err);
                //data就是成功的 里面 url
                console.log(data);
                //   此时说明文件上传成功  云服务器会返回一个地址，我们需要把该地址放到组件的img标签上
                //  此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
                // 目前虽然是一张图片 但是请注意 我们的fileList是一个数组
                // 需要知道当前上传成功的是哪一张图片
                this.fileList = this.fileList.map((item) => {
                  // 去找谁的uid等于刚刚记录下来的id
                  if (item.uid === this.currentFileUid) {
                    //Location为传回的地址，但是没有http字段         
                    return { url: "http://" + data.Location, upload: true }
                  }
                  return item;
                });         
              }
            }
          );
        }
      },

成功后返回 的locagion 就是图片地址 加上http：//就可以获取了