el-upload默认自动上传,当我想对参数进行操作的时候就需要通过:http-request覆盖默认的上传行为,可以自定义上传的实现。
明确目标
因为业务的需求,在上传文件的时候我还要传递文件名,和对应调度的子项目id,所以默认的上传方式就不适合我了。
改进方法
话不多说,直接贴代码,再逐一解释
action=""
一定要设置,action
是必填参数,但是我们设置了:http-request
,会覆盖action
<el-upload
action=""
:http-request="httpRequest"
:file-list="fileList"
>
<el-button type="text">点击上传</el-button>
</el-upload>
<script>
import { uploadFile } from '@/api/mission'
async httpRequest(param) {
const { file } = param
const formData = new FormData()
formData.append('file_content', file)
formData.append('s_pj_code', this.data.s_pj_code)
formData.append('file_name', file.name)
await uploadFile(formData)
}
</script>
发送请求用的axios
export function uploadFile(data) {
return request({
url: `api/file_upload`,
method: 'post',
data
})
}