关于vue使用阿里云OSS分片上传(含进度条)

需要上传文件到阿里云OSS考虑到文件较大采用分片上传(demo)

1. 使用 npm 安装SDK开发包

npm install ali-oss

2.在 vue 中直接使用

代码段可直接使用 具体功能查看 官方文档

<template>
  <div>
    <el-upload
      ref="upload"
      drag
      action
      :auto-upload="false"
      multiple
      :on-change="uploadFile"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-progress
      style="margin: 20px 0"
      :text-inside="true"
      :stroke-width="26"
      :percentage="progress"
    ></el-progress>
  </div>
</template>

  data() {
    return {
      progress: 0,
      uploadId: "",
      file_name: "",
    };
  },

 methods: {
 async uploadFile(files) {
      let that = this;
      let file = files.raw;
      let OSS = require("ali-oss");
      // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
      let res = await GetSts();//向后端发请求获取信息
      let client = new OSS({
        bucket: res.data.body.bucket_name,
        region: res.data.body.region,
        accessKeyId: res.data.body.AccessKeyId, 
        accessKeySecret: res.data.body.AccessKeySecret, 
        stsToken: res.data.body.SecurityToken, 
        expiration: res.data.body.Expiration, 
      });
      const options = {
        // 获取分片上传进度、断点和返回值。
        progress: (p, cpt, res) => {
          that.uploadId = cpt.uploadId;//取消时需要的参数
          that.progress = Number((p * 100).toFixed(0));//进度条
        },
        // 设置并发上传的分片数量。
        parallel: 9999,
        // 设置分片大小。默认值为1 MB，最小值为100 KB。
        partSize: 1024 * 1024,
        // headers,
        // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
        meta: { year: 2020, people: "test" },
        callback: {
          // 设置回调请求的服务器地址，且要求必须为公网地址。
          url: res.data.body.callback.url,
          // 设置发起回调时请求body的值。
          body: res.data.body.callback.body,
          // 设置发起回调请求的Content-Type。
          contentType: res.data.body.callback.contentType,
        },
      };
      //开始分片上传。
      async function multipartUpload() {
        try {
          //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
          let result = await client.multipartUpload(
            res.data.body.folder + "/" + file.name,
            file,
            {
              ...options,
            }
          );
          console.log(result);
          let head = await client.head(file.name);
          console.log(head);
        } catch (e) {
          // 捕获超时异常。
          console.log(e);
        }
      }
      multipartUpload(); //调用函数
    },
 },

重要 通常在文件大于100 MB的情况下，建议采用分片上传的方法，通过断点续传和重试，提高上传成功率。如果在文件小于100 MB的情况下使用分片上传，且partSize设置不合理的情况下，可能会出现无法完整显示上传进度的情况。对于小于100 MB的文件，建议使用简单上传的方式。