vue使用阿里云上传（sts授权）

前端使用阿里云上传文件（sts授权上传） vue框架

---

下载阿里云插件

 npm install ali-oss --save

获取授权所需的参数

 //获取Token
   async getAliToken() {
    //获取Token
    let uploadUrl = "api/v1/funs/getSts"; // 也可以前端写死 需要的参数  ps:我使用的是后端返回的参数
    return new Promise((resolve, reject) => {
      uploadInstance
        .post(uploadUrl)
        .then((res) => {
          if (res.status === 200) {
            const {
              expiration,
              AccessKeyId,
              AccessKeySecret,
              SecurityToken,
              bucket,
              endpoint,
            } = res.data;
            let dataObj = {
              region: endpoint,
              bucket,
              accessKeyId: AccessKeyId,
              accessKeySecret: AccessKeySecret,
              stsToken: SecurityToken,
            };
            resolve(dataObj);
          } else {
            reject(false);
          }
        })
        .catch((err) => {
          console.log(err);
          reject(false);
        });
    });
  }
    });

封装一个oss对象接受获取到的参数

 Client = (data) => {
    //后端提供数据
    return new OSS({
      region: data.region, //oss-cn-beijing-internal.aliyuncs.com
      accessKeyId: data.accessKeyId,
      secure: true,
      accessKeySecret: data.accessKeySecret,
      stsToken: data.stsToken,
      bucket: data.bucket,
    });
  };

上传文件到阿里云

// 阿里云上传
  async updateAliOSS(filename, file) {
    let params = {};
    await this.getAliToken() // 获取oss对象所需参数赋值params
      .then((response) => {
        params = response;
      })
      .catch((err) => {
        console.log(err);
      });

    return new Promise((resolve, reject) => {
      let client = this.Client(params); //生成一个oss对象并将参数带入
      client.multipartUpload(filename, file, { // 分片上传 
          progress: function(p, checkpoint) {
            option.onProgress({ percent: Math.floor(p * 100) }); // 触发el-upload组件的onProgress方法
          },
        })
        .then(({ res }) => {
          if (res.statusCode === 200) { //判断上传是否成功
            resolve(res.requestUrls);
          } else {
            option.onError("上传失败");
          }
        })
        .catch((error) => { 
          client.put(filename, file, { // 如果分片上传失败 使用put上传
              progress: function(p, checkpoint) {
                option.onProgress({ percent: Math.floor(p * 100) }); // 触发el-upload组件的onProgress方法
              },
            })
            .then(({ res }) => {
              if (res.statusCode == 200) {
                resolve(res.requestUrls);
              } else {
                option.onError("上传失败");
              }
            });
        });
    });
  }