vue 前端上传文件到ali-oss

配置：

     来源*
     允许methods：POST ，GET，PUT，DELETE，HEAD
     允许 Headers：*
     暴露 Headers：etag  
     //  暴露 Headers x-oss-request-id   x-oss-meta-test 暂时没用到

1： npm i ali-oss;
2 ： const OSS = require('ali-oss');
3： html

          <el-upload
                        :http-request="Upload"
                        :show-file-list="false"
                        action=""
                        accept='.mp4'
                        :before-upload="handleVideoBefore"
                    >
                   <el-button size="small" type="primary">上传视频</el-button>
                </el-upload>

4： 方法

     //上传前
        handleVideoBefore(file){
             const isLt2M = file.size / 1024 / 1024 < 400;
             if (!isLt2M) {
                 this.$message({
                     message: '上传文件大小不能超过400MB!',
                     type: 'warning'
                 });
                 return false;
             }
             else {
                 return true;
             }
        }
     // 自定义视频上传
        Upload(file) {
                //生成上传oss
                let store = new OSS(this.objData);
                store.multipartUpload(
                  //第一个参数可以设置自定义的路径
                    file.file.name, 
                    file.file,
                    {
                        //获取进度条的值
                        progress: (p) =>{ 
                        },
                    }
                ).then(
                     //处理成功
                    result => {
                      //处理签名地址
                     store.signatureUrl(result.name)
                    }
                )
                .catch( (err)=> {
                    this.$message({
                        message: '视频上传失败！',
                        type: 'warning'
                    });
               })
        },

更多详细参考阿里云文档：
https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11174283.6.1344.7dca7da2kfS0Tv