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

目录

• element-ui+axios多文件上传并显示进度
• 解决element ui多文件上传的问题
• 业务场景
• 解决办法

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
@CrossOrigin
public 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";
    }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。