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("上傳失敗");
              }
            });
        });
    });
  }