elementUi的upload上传使用http-request后,如何使用钩子函数

使用http-request会覆盖elementUi默认的上传行为,可以自定义上传文件的方法,这个时候action可以随便写,因为不管用。
使用http-request后,组件自带的钩子是不可以用的,on-success,on-progress…如果还想使用这些钩子,可以从http-request的参数中获取。第三张图中查看具体参数。
elementUi的upload上传使用http-request后,如何使用钩子函数_第1张图片
elementUi的upload上传使用http-request后,如何使用钩子函数_第2张图片
elementUi的upload上传使用http-request后,如何使用钩子函数_第3张图片
附上代码,方便复制:

<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) {
			
		},

你可能感兴趣的:(常见问题汇总)