el-upload multiple多文件上传，只传上一个的问题

最新推荐文章于 2025-03-21 11:38:18 发布

指标满载

最新推荐文章于 2025-03-21 11:38:18 发布

阅读量3.5k

点赞数

文章标签： multiple up-load 多文件上传只上传一个

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/105228520

版权

当使用el-upload组件并设置multiple属性进行多文件上传时，遇到仅能上传一个文件的问题。通过覆盖默认的上传行为，利用http-request钩子自定义上传方法，解决了多文件上传不成功的问题。

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

问题：使用el-upload设置了multiple上传多文件时，但是on-success钩子只拿到了一个response，上传其实只成功上传了一个。

解决：使用:http-requst来覆盖默认的上传行为，可以自定义上传的实现。

代码：

<el-upload
       :headers="headers"
       action="/admin/sys-file/upload"
        multiple
       :http-request="uploadRequest"
       :file-list="[]"
       :on-progress="handleProgress"
       :before-upload="beforeUpload"
       :on-success="handleSuccess">
           <el-button size="small" type="primary">上传</el-button>
 </el-upload>


methods: {
//覆盖默认上传行为的上传图片成功
      uploadRequest(param) {
        let that = this
        let fileObj = param.file;
        let formData = new FormData();
        formData.append('file', fileObj);
        this.axios.post('/admin/sys-file/upload', formData).then((res) => {
          addPicLib