vue+springboot多文件上传

vue+springboot多文件上传

参考地址:https://github.com/Junhyunny/blog-in-action.git

具体路径：F:projectuploadblog-in-action-master2021-01-20-multipartfile

springboot:

step1: F:projectswservertwogoodUploadpom.xml

  4.0.0
  
    org.springframework.boot
    spring-boot-starter-parent
    2.4.1
     
  

  blog.in.action
  action-in-blog
  0.0.1-SNAPSHOT
  action-in-blog

  
    11
  

  
    
      org.springframework.boot
      spring-boot-starter-web
    

    
      org.springframework.boot
      spring-boot-starter-test
      test
      
        
          org.junit.vintage
          junit-vintage-engine
        
      
    

    
      org.projectlombok
      lombok
      provided
    
  

  
    
      
        org.springframework.boot
        spring-boot-maven-plugin
      
    
  

step2: F:projectswservertwogoodUploadsrcmainresourcesapplication.yml

server:
  port: 8078
spring:
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 20MB

step3: F:projectswservertwogoodUploadsrcmainjavabloginactionActionInBlogApplication.java

package blog.in.action;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ActionInBlogApplication {
    public static void main(String[] args) {
        SpringApplication.run(ActionInBlogApplication.class, args);
    }

}

step4: F:projectswservertwogoodUploadsrcmainjavabloginactioncontrollerFileController.java

package blog.in.action.controller;

import java.io.FileOutputStream;
import java.util.List;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequestMapping(value = "/api/file")
public class FileController {

    @CrossOrigin("*")
    @PostMapping(value = "/upload/profile-img")
    public @ResponseBody
    String requestUploadFile(@RequestParam("fileList") List fileList) {
        System.out.println(fileList);
        try {
            for (MultipartFile multipartFile : fileList) {
                FileOutputStream writer = new FileOutputStream("./images/" + multipartFile.getOriginalFilename());
                writer.write(multipartFile.getBytes());
                writer.close();
            }
        } catch (Exception e) {
            return "upload fail";
        }
        return "upload success";
    }
}

vue:

step1： E:UserscoderWebstormProjectsuploaduntitledpackage.json

"dependencies": {
  "axios": "^0.21.4",
  "core-js": "~3.17.3",
  "vue": "~2.6.14",
  "vuetify": "~2.5.8"
},

step2: E:UserscoderWebstormProjectsuploaduntitledsrccomponentsHelloWorld.vue

上传成功的路径文件：F:projectswservertwogoodUploadimagesfour.txt

end