vue+element-ui+axios多文件上传怎么实现并显示整体进度

今天小编给大家分享一下vue+element-ui+axios多文件上传怎么实现并显示整体进度的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

element-ui+axios多文件上传并显示进度

element-ui自带的多文件上传是做成了多文件多次上传,公司有需求需要选取多个文件一次上传全部.

代码部分

后端代码(模拟)

@RequestMapping("/oss/ossUploadObject")public ApiResponse uploadObject(@RequestParam("file") MultipartFile[] file, FileVo fileVo){    //...code    FileDto dto = new FileDto();    dto.setUrl("");    dto.setFileId("");    return ApiResponse.success(FileDto);}

解决element ui多文件上传的问题

业务场景

在使用vue+elementui 实现文件上传的时候，我发现官网给的组件每次都会自动上传，而且一次上传一个文件。但是我实际的业务是，一次上传多个文件。

解决办法

前端代码：

后端接口代码：

package com.yj.wiki.controller;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile; @RestController@CrossOriginpublic class UploadFileController {     @PostMapping("/upload")    public String upload(MultipartFile[] files){         for (MultipartFile file : files) {            System.out.println(file.getOriginalFilename());         }         return "ok";    }     @PostMapping("/testabc")    public String upload(String name){         System.out.println(name    );         return "ok";    }}

以上就是"vue+element-ui+axios多文件上传怎么实现并显示整体进度"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。