el-upload使用http-request添加手动上传方式

最新推荐文章于 2025-05-08 14:59:35 发布

Linooc

最新推荐文章于 2025-05-08 14:59:35 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： http javascript 前端 elementui

本文链接：https://blog.youkuaiyun.com/weixin_44206947/article/details/129702255

在使用el-upload组件时，通过http-request属性覆盖默认的文件上传行为，实现先保存表单数据再统一提交的逻辑。通过绑定modelValue并调整请求类型为multipart/form-data，可以在表单提交时包含文件信息。若需自动上传，可通过autoUpload控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

填form表单的时候提交文件后不想直接上传后台，想填完其他数据后再按保存按钮一起提交：

!](https://img-blog.csdnimg.cn/0288c78148ef43f4ad843e32f531c60c.png)
像这样el-upload的自动上传是不满足需求的

问题解决：

使用http-request覆盖默认的 Xhr 行为

//实例不包括全部属性，只展示需要额外加的
<el-upload :http-request="handleUpload" />


//方法
async function handleUpload(params: any) {
 //把拿到的文件信息传给绑定这个组件的v-model，这样表单提交的时候直接拿绑定的值提交旧ok了
 //（但要注意一点请求方式要改为formdata格式）
  emit('update:modelValue', params.file);
//下面是自动上传方式 可以传递autoUpload决定提交文件的时候是否同时上传后台
  if (props.autoUpload) {
    const res = await postFormData(props.action, {
      file: params.file
    });
    emit('success', res);
  }
}

// postFormData是我这边封装的请求方法，和正常的post请求区别在于请求类型改为formdata格式:

	config.headers['Content-Type'] = 'multipart/form-data';