vue+element使用upload组件，`http-request`属性重写上传的方法

因为上传文件的同时，还要把文件在大小一起请求到服务端，而element原生的data(上传时附带的额外参数)做不到这个需求，所以只能使用http-request重写了。

使用`http-request`属性重写后，发现element原生进度条消失了。。。

另外on-success（文件上传成功时的钩子）、on-error（文件上传失败时的钩子）等等也都失效了

解决方法：

注意：action 虽然用不上，但也不能删，随便给个字符就行了

1.  
   <el-upload
2.  
   ref="upload"
3.  
   action="null"
4.  
   :file-list="videoFileList"
5.  
   :http-request="uploadResourceRequest"
6.  
   >
7.  
   <el-button type="success" size="small" slot="trigger">上傳文件到服務器</el-button>
8.  
   </el-upload>

1.  
   export default {
2.  
   data() {
3.  
   return {
4.  
   //选择需要上传的文件列表
5.  
   videoFileList: []
6.  
   }
7.  
   }
8.  
   }

1.  
   methods: {
2.  
   /**
3.  
   * 自定义上传
4.  
   * @param elementUI自动传的参数，这个参数就是文件对象
5.  
   * */
6.  
   uploadResourceRequest(param){
7.  
   param.status = 'uploading'; //文件上传状态
8.  
   param.percentage = 0; //文件上传进度，这里设为0
9.  
   param.name = param.file.name //文件名
10.  
    this.videoFileList.push(param) //添加到选择文件列表
11.  
    let fd = new FormData()
12.  
    fd.append('size', param.file.size)
13.  
    fd.append('files', param.file)
14.  
    this.$axios.post('http://xxx.xxx.xxx/upload', fd, {
15.  
    onUploadProgress: function(progressEvent) { // 处理上传进度事件
16.  
    let percent = (progressEvent.loaded / progressEvent.total * 100).toFixed(0); //计算出上传的进度，去整数位
17.  
    param.percentage = percent; //动态设置param的percentage
18.  
    // console.info(percent)
19.  
    }
20.  
    }).then(response => {
21.  
    //请求成功
22.  
    console.log(response.data);
23.  
    param.status = 'success'; //上传成功后将status属性改成success
24.  
    }).catch(function (error) {
25.  
    // 请求失败处理
26.  
    console.log(error);
27.  
    param.status = 'failed';
28.  
    param.message = '上传失败';
29.  
    });
30.  
    },
31.  
    }

这样就能解决element原生进度条不显示的问题了

参考文章：https://blog.csdn.net/illusionGD/article/details/115556867

这篇好文章是转载于：学新通技术网