多个el-upload上传

当使用el-upload上传多个文件时，通常是一个文件接着一个上传的。但如果我们希望一次性上传所有文件，并由后台统一处理，我们可以采取以下步骤：

第一步：使用el-upload插件，设置相关属性和事件。例如，设置multiple属性为true，表示可以选择多个文件进行上传；设置auto-upload属性为false，表示不自动上传；设置on-change事件，用于监听文件选择的变化[2]。

第二步：在前台将选中的文件以form格式传递给后台。可以使用FormData对象将文件和其他数据组合为一个表单，然后通过ajax等方式将表单发送到后台。

具体的代码示例如下：

// 第一步
<el-upload ref="upload" :multiple="true" :auto-upload="false" :on-change="handleChange">
  <el-button size="small" type="primary">上传文件</el-button>
</el-upload>

// 第二步
// 在handleChange事件中获取选中的文件列表，并将文件和其他数据组合为FormData对象
handleChange(fileList) {
  let formData = new FormData();
  formData.append("JsonStr", JSON.stringify(DTO));
  for (let i = 0; i < fileList.length; i++) {
    formData.append("file", fileList[i].raw);
  }
  formData.append('contentType', "multipart/form-data");

  // 将formData发送到后台进行处理，可以使用ajax等方式
  // ...
}

通过以上步骤，我们可以实现一次性上传多个文件并由后台统一处理的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue el-upload插件上传批量文件](https://blog.csdn.net/qq_33100887/article/details/118703405)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]