Element-ui+RuoYi项目 多文件上传 前端+后端

在项目中一次提交需要将2个以上的文件传到本地服务器上，element-ui虽然可以实现一次上传多个文件，但是需要多次发送请求，如：提交两个以上的文件时，会调用两次以上的请求。那么如何只发送一次请求就将多个文件同时提交呢？

1.  
   <template>
2.  
   <div class="app-container">
3.  
   <el-upload
4.  
   ref="upload"
5.  
   accept=".jpg, .png, .txt"
6.  
   :action="upload.url"
7.  
   multiple
8.  
   :http-request="HttpUploadFile"
9.  
   :headers="upload.headers"
10.  
    :file-list="upload.fileList"
11.  
    :on-success="handleFileSuccess"
12.  
    :on-change="changeFileList"
13.  
    :data="getfileData()"
14.  
    :auto-upload="false">
15.  
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
16.  
    </el-upload>
17.  
    <el-button style="margin-left: 10px;" type="success"
18.  
    :loading="upload.isUploading" @click="submitUpload">提交</el-button>
19.  
    </div>
20.  
    </template>
21.  
     
22.  
    <script>
23.  
    import { uploadFile } from "@/api/system/info";
24.  
    import { getToken } from "@/utils/auth";
25.  
     
26.  
    export default {
27.  
    data(){
28.  
    return {
29.  
    fileData: '',
30.  
    form: {},
31.  
    upload: {
32.  
    // 是否禁用上传
33.  
    isUploading: false,
34.  
    // 设置上传的请求头部
35.  
    headers: { Authorization: "Bearer " getToken() },
36.  
    // 上传的地址
37.  
    url: process.env.VUE_APP_BASE_API "/common/upload",
38.  
    // 上传的文件列表
39.  
    fileList: []
40.  
    },
41.  
    }
42.  
    methods: {
43.  
    //文件上传成功后的钩子函数
44.  
    handleFileSuccess(response, file, fileList) {
45.  
    this.upload.isUploading = false;
46.  
    this.upload.fileList = []
47.  
    this.$modal.msgSuccess(response.msg);
48.  
    },
49.  
    //fileList长度改变时触发
50.  
    changeFileList(file, fileList) {
51.  
    this.upload.fileList = fileList
52.  
    },
53.  
    getfileData() {
54.  
    //此处的form是表单中的其它绑定值
55.  
    return this.form
56.  
    },
57.  
    submitUpload() {
58.  
    //创建FormData对象，用于携带数据传递到后端
59.  
    this.fileData = new FormData()
60.  
    this.$refs.upload.submit();
61.  
    this.fileData.append("data", JSON.stringify(this.form));
62.  
    this.fileData.append("headers", { Authorization: "Bearer " getToken() });
63.  
    this.fileData.append("withCredentials",false)
64.  
    this.fileData.append("filename", "file");
65.  
    var i = this.upload.fileList.length
66.  
    if (i !== 0) {
67.  
    //此处执行调用发送请求
68.  
    uploadFile(this.fileData).then((res) =>{
69.  
    if(res.code === 200) {
70.  
    this.upload.isUploading = false;
71.  
    this.upload.fileList = []
72.  
    this.$modal.msgSuccess(res.msg);
73.  
    } else {
74.  
    this.$message({
75.  
    message: "失败",
76.  
    type: 'error'
77.  
    })
78.  
    }
79.  
    })
80.  
    } else {
81.  
    //如果没有文件要上传在此处写逻辑
82.  
    }
83.  
    },
84.  
    HttpUploadFile(file) {
85.  
    this.fileData.append('files', file.file); // append增加数据
86.  
    },
87.  
    }
88.  
    }
89.  
    };
90.  
    </script>

前端代码element-ui的upload标签中关键是要添加http-request，它会在提交文件上传前，拦截请求然后我们这里执行append将要上传的多个文件提前添加到fileData中。

1.  
   @PostMapping("/common/upload")
2.  
   @Transactional(rollbackFor=Exception.class)
3.  
   public AjaxResult uploadFile(@RequestParam("files") MultipartFile[] files, @RequestParam("data") String data){
4.  
   try{
5.  
   //这里的data是同时携带的其它信息就是前端的form里的信息,可以是用下面的json方式解析为自己相应的对象
6.  
   System.out.println(data);
7.  
   //JSONObject.toJavaObject(JSONObject.parseObject(data),TSoftRequirementUpload.class);
8.  
   // 上传文件路径
9.  
   String filePath = RuoYiConfig.getUploadPath();
10.  
    String fileName = "";
11.  
    String url = "";
12.  
    int z;
13.  
    // 上传并返回新文件名称
14.  
    System.out.println(filePath);
15.  
    AjaxResult ajax = AjaxResult.success();
16.  
    for (int i = 0 ; i<files.length; i ) {
17.  
    System.out.println(files[i].getOriginalFilename());
18.  
    fileName = FileUploadUtils.upload(filePath, files[i]);
19.  
    url = serverConfig.getUrl() fileName;
20.  
    SysFileInfo sysFileInfo = new SysFileInfo();
21.  
    sysFileInfo.setFileName(fileName);
22.  
    sysFileInfo.setFilePath(filePath);
23.  
    sysFileInfo.setRealfileName(files[i].getOriginalFilename());
24.  
    sysFileInfo.setRequirementId(tSoftRequirementUpload.getId());
25.  
    z = iSysFileInfoService.insertSysFileInfo(sysFileInfo);
26.  
    if (z == 1) {
27.  
    ajax.put("fileName" i, fileName);
28.  
    ajax.put("url" i, url);
29.  
    }
30.  
    }
31.  
    return ajax;
32.  
    }
33.  
    catch (Exception e)
34.  
    {
35.  
    System.out.println(e.getMessage());
36.  
    return AjaxResult.error(e.getMessage());
37.  
    }
38.  
    }

1.  
   //需要用到的类，可根据自己的实际情况修改
2.  
   public class SysFileInfo
3.  
   {
4.  
   private static final long serialVersionUID = 1L;
5.  
    
6.  
   /** 文件id */
7.  
   private Long fileId;
8.  
    
9.  
   /** 文件名称 */
10.  
    @Excel(name = "文件名称")
11.  
    private String fileName;
12.  
     
13.  
    /** 文件路径 */
14.  
    @Excel(name = "文件路径")
15.  
    private String filePath;
16.  
     
17.  
    /** 真实的文件名称 */
18.  
    @Excel(name = "真实的文件名称")
19.  
    private String realfileName;
20.  
     
21.  
    /** 软件需求上报表id */
22.  
    @Excel(name = "软件需求上报表id")
23.  
    private Long requirementId;
24.  
     
25.  
    public void setFileId(Long fileId)
26.  
    {
27.  
    this.fileId = fileId;
28.  
    }
29.  
     
30.  
    public Long getFileId()
31.  
    {
32.  
    return fileId;
33.  
    }
34.  
    public void setFileName(String fileName)
35.  
    {
36.  
    this.fileName = fileName;
37.  
    }
38.  
     
39.  
    public String getFileName()
40.  
    {
41.  
    return fileName;
42.  
    }
43.  
    public void setFilePath(String filePath)
44.  
    {
45.  
    this.filePath = filePath;
46.  
    }
47.  
     
48.  
    public String getFilePath()
49.  
    {
50.  
    return filePath;
51.  
    }
52.  
    public void setRealfileName(String realfileName)
53.  
    {
54.  
    this.realfileName = realfileName;
55.  
    }
56.  
     
57.  
    public String getRealfileName()
58.  
    {
59.  
    return realfileName;
60.  
    }
61.  
    public void setRequirementId(Long requirementId)
62.  
    {
63.  
    this.requirementId = requirementId;
64.  
    }
65.  
     
66.  
    public Long getRequirementId()
67.  
    {
68.  
    return requirementId;
69.  
    }
70.  
     
71.  
    @Override
72.  
    public String toString() {
73.  
    return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
74.  
    .append("fileId", getFileId())
75.  
    .append("fileName", getFileName())
76.  
    .append("filePath", getFilePath())
77.  
    .append("realfileName", getRealfileName())
78.  
    .append("requirementId", getRequirementId())
79.  
    .toString();
80.  
    }
81.  
    }

第一次发文章，很多地方不足！！希望能帮助到大家！！谢谢观看！！

这篇好文章是转载于：学新通技术网