之前做上传，参考element UI的官方示例，使用action属性，action是上传的地址。
这次做的项目，换了一个后端对接，说，上传不需要调用接口，我懵了，我寻思示例不都是使用了action嘛，经过一番了解，upload组件还提供了http-request覆盖默认上传行为。
elementUI 的upload组件的http-request方法的使用
image.png
http-request有个默认的参数：content
content是一个object对象：里面包含一些upload组件的回调方法，可以使用upload组件原生的方法。
image.png
下面记录下具体使用方法，很简单
1、
<el-upload
:action="action"
:file-list="modeList"
:http-request="modeUpload"
>
<el-button size="small" type="primary">上传</el-button>
</el-upload>
<el-button @click="upload">点击上传文件</el-button>
data() {
return {
action: 'https://jsonplaceholder.typicode.com/posts/',
mode: {}
}
}
:action是必不可少但是却没什么作用的
:http-request可以覆盖默认的上传方法
2、我配置的:action的值（就是官方文档示例的值）
action: 'https://jsonplaceholder.typicode.com/posts/'
3、:http-request函数内容，将上传成功的文件保存到mode里面，mode是自己在data里面定义的变量，初始值是mode:{}
modeUpload: function(item) {
// console.log(item.file);
this.mode = item.file
}
4、上传按钮的点击事件
upload: function() {
let fd = new FormData()
fd.append('templateFile', this.mode)
axios.post('/api/reportRule', fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
})
},
5、上传成功，后台可以读取到数据
image.png
