利用阿里云，实现大文件上传功能

最近公司在做项目，是一个视频文件上传的功能，前后端讨论技术方案后，采用阿里云提供的功能去实现，下面主要是前端的代码，

html

    <input type="file" @change="uploadVideo">
    <!--进度条-->
    <el-progress :percentage="percentage"></el-progress>

uploadVideo(e){
    //拿到上传文件的允许条件，具体问后端
   this.axios.get("/sts/token").then(res => {
        let OSS = require("ali-oss");
        let client = new OSS({
          // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
          region: "oss-cn-beijing",
          // 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
          //accessKeyId,accessKeySecret,stsToken这三个值是后端返给你的
          accessKeyId: res.Credentials.AccessKeyId,
          accessKeySecret: res.Credentials.AccessKeySecret,
          stsToken: res.Credentials.SecurityToken,
          // 填写Bucket名称。
          bucket: '后端小哥会告诉你'
        });
        // let client = new OSS(ossConfig);
        let tempCheckpoint;
        async function multipartUpload() {
          try {
            // 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
            // 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如mytestdoc/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
            // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
            let result = await client.multipartUpload(
              `在后端存储的位置/${res.file_name}`,
              e.target.files[0],
              {
                progress: function(p, checkpoint) {
                    //p是返回的上传进度
                  console.log(p);
                  that.percentage = parseInt(p * 100);
                  if (p == 1) {
                      //p等于1时，表示上传已经完成，给后端发一次请求，告诉这个文件已经上传完成了
                    that.axios.post("/sts/token", {
                      file_name: res.file_name,
                      upload_status: "already_upload"  //这个字段前后端协商
                    });
                  }
                  // 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
                  tempCheckpoint = checkpoint;
                }
              }
            );
          } catch (e) {
            console.log(e);
          }
        }
        multipartUpload();
      });
}

前端代码已经写完了，这样写了，执行的时候，会出现下图的问题

解决方案是在阿里云的设置里加一个header 登录OSS管理控制台

单击Bucket列表，之后单击目标Bucket名称。

单击权限管理>跨域设置，在跨域设置区域单击设置。

单击创建规则，在设定跨域规则面板设置跨域访问参数。

暴露 Headers：设置为ETag、x-oss-request-id和x-oss-version-id。

设置完就搞定了。