vue 直传视频到阿里云OSS

先下载这个  ali-oss 插件

npm i ali-oss

如果项目中需要加密，再下载一个md5

npm i js-md5

话不多说，上代码

import OSS from "ali-oss";
import md5 from "js-md5";
export default {
  createOssClient() {
    return new Promise((resolve, reject) => {
      const client = new OSS({
        region: 'your', // 请设置成你的
        accessKeyId: 'your', // 请设置成你的
        accessKeySecret: 'your', // 请设置成你的
        bucket: 'your', // 请设置成你的
        secure: true // 上传链接返回支持https
      });
      resolve(client);
    });
  },
   ossUploadFile(option) {
    // console.log(option)
    const file = option.file;
    const self = this;
    return new Promise((resolve, reject) => {
    const date = new Date().getTime(); // 当前时间戳
    //这里匹配到的是
    const extensionName = file.name.split('.')[file.name.split('.').length-1]; // 文件扩展名
    const fileName = "video" + date + '.' + extensionName; // 文件名字（相对于根目录的路径 + 文件名）
    // 执行上传
    self.createOssClient().then(client => {
    // 异步上传,返回数据
    resolve({
     fileName: file.name,
     fileUrl: fileName
    });
        // 上传处理
        // 分片上传文件
    client.multipartUpload(fileName, file, {
      progress: function(p) {
       const e = {};
       e.percent = Math.floor(p * 100);
       option.onProgress(e);
      }
    }).then(val => {
        window.url = val
        if (val.res.statusCode === 200) {
         option.onSuccess(val);
         this.video_url = val.res.requestUrls[0].split("?")[0];//这个也很重要,必须切割,要不链接显示错误
         // console.log(val)
          return val;
        } else {
           option.onError("上传失败");
        }
      },
        err => {
         console.log('上传失败err',err);
         option.onError("上传失败");
         reject(err);
        }
     );
    });
   });
  }
};

在另一个页面引入即可，下面是另一个页面的引入和使用

import oss from "./oss/ossjs";

methods：{
  async fnUploadRequest_ossjs(option) {
    oss.ossUploadFile(option);
  }
}

一切准备就绪之后,如果报下面这个错误

Access to XMLHttpRequest at 'https://yiben01.oss-cn-beij.aliyuncs.com/video/1562445586655.png?uploads=' from origin 'http://localhost:9999' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

那就是你的这两个可能权限太高,或者是配置太高，或者是太低，总之我是修改了这个图片就能上传成功了

如果报下面这个错误 

Please set the etag of expose-headers in OSS

可以去参考这个https://help.aliyun.com/document_detail/277773.html进行上边说的配置，就能接解决。