使用 el-upload 如何做到发送一次请求上传多个文件

在使用 Element UI 的 el-upload 组件时,默认情况下每次选择文件都会触发一次上传请求。如果你需要一次性上传多个文件,而不是每个文件都触发一次请求,可以通过一些配置和代码处理来实现。

方法一:通过配置file-list(推荐使用)

html部分:

html 复制代码
<el-upload
    class="upload-demo list-uploadbtn"
    ref="upload"
    :action="curBastUrl"
    :auto-upload="false"
    :on-remove="updataRemove"
    :before-upload="beforeUpload"
    :on-change="updatachange"
    :file-list="fileList"
    :multiple="true">
    <el-button size="small">点击上传</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">确 定</el-button>

js部分:

javascript 复制代码
submitUpload() {  // 导入
    let formData = new FormData();  //  用FormData存放上传文件
    this.fileList.forEach(file => { 
        formData.append('file', file.raw)		
    }) 
          
    formData.append('categoryDirectory', this.filedata.categoryDirectory)

    // importCase是上传接口
    importCase(formData).then((res) => { 
        //手动上传无法触发成功或失败的钩子函数,因此这里手动调用 
      this.updataSuccess(res.data) 
    }, (err) => {
       
    })
}

方法二:通过配置http-request

html部分:

html 复制代码
<el-upload
    class="upload-demo list-uploadbtn"
    ref="upload"
    :action="curBastUrl"
    :auto-upload="false"
    :http-request="uploadFile"
    :on-remove="updataRemove"
    :before-upload="beforeUpload"
    :on-change="updatachange"
    :multiple="true">
    <el-button size="small">点击上传</el-button>
</el-upload>
<el-button type="primary" @click="submitUpload">确 定</el-button>

js部分:

javascript 复制代码
submitUpload() {  // 导入
    let tempData =  this.filedata
    this.filedata = new FormData()  //  用FormData存放上传文件
    this.$refs.upload.submit()  // 会循环调用uploadFile方法,多个文件调用多次

    this.filedata.append('categoryDirectory', tempData.categoryDirectory)

    // importCase是上传接口
    importCase(this.filedata).then((res) => { 
    //手动上传无法触发成功或失败的钩子函数,因此这里手动调用 
      this.updataSuccess(res.data) 
    }, (err) => {
       
    })
}
uploadFile(file) {
    this.filedata.append('file', file.file)
}
相关推荐
三小河16 分钟前
教你发布一个npm的组织包
前端
用户61204149221324 分钟前
使用JSP+Servlet+JavaBean做的课程后台管理系统
java·javascript·mysql
青椒a28 分钟前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo28 分钟前
react 中的useContext和Provider实践
前端·react.js
AnalogElectronic28 分钟前
vue3 实现贪吃蛇手机版01
开发语言·javascript·ecmascript
asdfsdgss29 分钟前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
袁煦丞1 小时前
【私人导航员+内网穿透神器】Sun-Panel × cpolar让NAS变身你的数字管家:cpolar内网穿透实验室第564个成功挑战
前端·程序员·远程工作
爱吃的强哥1 小时前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
袁煦丞1 小时前
开启SSH后,你的NAS竟成私有云“变形金刚”:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
IT_陈寒1 小时前
SpringBoot 3.2新特性实战:这5个隐藏功能让我开发效率提升50%
前端·人工智能·后端