使用http-request会覆盖elementUi默认的上传行为,可以自定义上传文件的方法,这个时候action可以随便写,因为不管用。
使用http-request后,组件自带的钩子是不可以用的,on-success,on-progress…如果还想使用这些钩子,可以从http-request的参数中获取。第三张图中查看具体参数。
附上代码,方便复制:
<el-upload
:action="imgUrl"
:multiple="isMultiple"
:limit="limit"
:http-request="uploadFn"
:list-type="listType"
:before-upload="beforeUpload"
:on-remove="fileRemove"
:on-exceed="fileExceed"
:on-error="fileError"
:on-success="fileSuccess"
:disabled="isClick"
:file-list="fileList">
<el-button size="small" type="primary" :disabled="isClick">
{{buttonName}}
</el-button>
<div slot="tip" class="el-upload__tip" v-if="!limit.hidden && !size.hidden && !format.hidden">
{{`注:最多可上传${limit}个文件,文件大小不超过${size/1024}M,文件格式${format.join(",")}`}}
</div>
</el-upload>
//上传方法
uploadFn (data, key) {
this.file = data.file
let formData_ = new FormData();
formData_.append('file', this.file);
return this.imgUpload(formData_,data);
},
imgUpload (formData,param) {
this.$axios({
url: process.env.VUE_APP_DEV_MANAGE_SEVER_NAME + '/dev/dossier/upload',
data: formData,
method: "post",
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: event => {
param.file.percent = event.loaded/event.total*100
param.onProgress(param.file)
}
}).then((res) => {
param.onSuccess(res)
})
},
//上传成功的回调
fileSuccess (res,file,fileList) {
},