文章分类

首页 / 文章分类 / 正文

Image

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

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";      }  }