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

使用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) {
			
		},
  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
您可以使用 el-upload 组件来自定义上传http-requestel-uploadElement UI 框架中用于文件上传的组件,支持多种自定义配置选项。 要实现自定义上传http-request,您可以通过设置 el-upload 组件的 action 属性来指定上传文件的接口地址。例如: ```html <el-upload action="/your-upload-api" :http-request="uploadRequest" > <!-- 填充上传组件的内容 --> </el-upload> ``` 然后,在 Vue 实例的 methods 中定义 uploadRequest 方法来处理上传请求。uploadRequest 方法会接收一个参数,其中包含了上传文件的相关信息,如文件对象、文件名等。您可以在该方法中使用 axios 或其他网络请求库发送自定义的上传请求。例如: ```js methods: { uploadRequest(file) { // 构建 FormData 对象,将文件和其他参数添加到 FormData 中 const formData = new FormData(); formData.append('file', file.raw); formData.append('name', file.name); // 使用 axios 发送自定义的上传请求 axios.post('/your-upload-api', formData) .then(response => { // 处理上传成功的响应 console.log(response.data); }) .catch(error => { // 处理上传失败的错误 console.error(error); }); } } ``` 在 uploadRequest 方法中,您可以根据实际需求构建 FormData 对象,并发送自定义的上传请求。在请求成功或失败时,您可以进行相应的处理逻辑。 这样,您就可以使用 el-upload 组件来实现自定义上传http-request。希望对您有所帮助!如有其他问题,请随时提问。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值