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

          
                   上传视频
                

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

你可能感兴趣的:(vue 前端上传文件到ali-oss)