前端上传文件到OSS

有许多业务需要前端单独上传文件到OSS上，下面提供一个现成的方法。

第一步，先引入oss的sdk

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

第二步，创建一个uploader.js
注：需要后端提供STS签名

function AliyunOSS () {
}

AliyunOSS.prototype.getUFileToken = function (options, success, error) {
  axios({
    method: 'get',
    url: api_host + '/api/oss-token',
    data: {},
  }).then(data => {
    success(data.data);
  }).catch(error)
}

AliyunOSS.prototype.uploadFile = function (options, success, error, progresss) {
  let file = options.file || {};
  let fileName = file.name;
  this.getUFileToken({}, function (token) {
    let client = new OSS.Wrapper({
      accessKeyId: token.AccessKeyId,
      accessKeySecret: token.AccessKeySecret,
      stsToken: token.SecurityToken,
      endpoint: 'https://' + token.Endpoint,
      bucket: token.Bucket
    });
    client.multipartUpload(fileName, file,
      {
        mime: file.type,
        progress: async function progress (p, checkpoint) {
          progresss(p);
        }
      }).then(result => {
        // 上传成功
        success({
          msg: "",
          path: 'https://test.tootootool.com' + '/' + fileName,
          file: file
        });
      }).catch(function (err) {
        error({ msg: err, file: file });
      });
  }, error);
}

第三步，引用js

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  <script src="../../../common/utils/uploader.js"></script>

第四步，使用

<input type="file" @change="onFileChange">

data: function () {
  return {
    uFile: null, // oss容器
  }
},
methods: {
  // 文件上传
  onFileChange ($event) {
    let this_= this;
    let files = $event.target.files || $event.dataTransfer.files;
    if (files) {
      // 调用oss上传
      if (!this_.uFile) {
        this_.uFile = new AliyunOSS();
      }
      this_.uFile.uploadFile({ file: files[0] }, function (res) {
        console.log('上传成功-->>', res.path)
      }, function (error) {
        console.error('err', error)
      }, (progress) {
        let progress = Math.round(progress * 100) + '%';
        console.log('上传进度-->>', progress)
      });
    }
  }
}