Bootstrap

小程序腾讯云上传图片

腾讯云上传图片

需要下载cos-wx-sdk-v5并引入
命令yarn install cos-wx-sdk-v5

import COS from "cos-wx-sdk-v5";

在这里插入图片描述

 <img v-if="imgUrl" :src="imgUrl" alt />
 <img v-else :src="imagePath" @click="selectPhoto" mode="aspectFill" />

在这里插入图片描述

   // 上传图片
    selectPhoto() {
      var that = this;
      var cos = new COS({
        getAuthorization: function(params, callback) {
          //获取签名 必填参数
          // 方法二(适用于前端调试)
          var authorization = COS.getAuthorization({
            SecretId: "XXXXXXXXXXXXXXXXXXXXXX",
            SecretKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
            // stsToken: that.sign.credentials.sessionToken,
            Method: params.Method,
            Key: params.Key
          });
          console.log(params);
          callback(authorization);
        }
      });
      wx.chooseImage({
        count: 9, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机,默认二者都有
        success: function(res) {
          var filePath = [];
          filePath = res.tempFilePaths;
          for (let i = 0; i < filePath.length; i++) {
            var Key = filePath[i].substr(filePath[i].lastIndexOf("/") + 1); // 这里指定上传的文件名
            console.log(that.sign.bucket, "hhhhhhhhh");
            cos.postObject(
              {
                Bucket: that.sign.bucket,
                Region: that.sign.region,
                Key: Key,
                FilePath: filePath[i],
                onProgress: function(info) {
                  console.log(JSON.stringify(info));
                }
              },
              function(err, data) {
                if (err && err.error) {
                  console.log(err, "iiiiii");
                  wx.showModal({
                    title: "返回错误",
                    content:
                      "上传失败:" +
                      err.error.Message +
                      ";状态码:" +
                      err.statusCode,
                    showCancel: false
                  });
                } else if (err) {
                  wx.showModal({
                    title: "上传出错",
                    content: "上传出错:" + err + ";状态码:" + err.statusCode,
                    showCancel: false
                  });
                } else {
                  wx.showToast({
                    title: "上传成功",
                    icon: "success",
                    duration: 3000
                  });
                  let url = "https://" + data.Location;
                  that.imgUrl = url;
                  // that.imgList.push(url);
                }
              }
            );
          }
        }
      });
    },

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;