SpringBoot 使用表单或者vue实现文件上传

@TOC

本文的前端是HTML表单，另一种vue + axios，后端使用SpringBoot 2.x

新建SpringBoot项目，同时导入依赖
项目结构

两个方法用的同一个控制层接口就直接先上控制层代码

package com.king.other.controller;

import io.swagger.annotations.*;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;


@RestController
@RequestMapping("/file")
@Api(value = "文件上传接口", tags = "测试接口2")
public class FileController {

    //默认上传到的路径
    private final String filePath = "F:\A\";

    @PostMapping("/upload")
    @ApiOperation(value = "上传单个文件", tags = "测试接口2")
    public String upload(@RequestParam("file") MultipartFile uploadFile, HttpServletRequest req) {
        if (!uploadFile.isEmpty()) {
            return saveFile(uploadFile);
        }
        return "上传失败!";
    }

    @PostMapping("/uploads")
    @ApiOperation(value = "上传多个文件", tags = "测试接口2")
    public String upload(@RequestParam("files") MultipartFile[] uploadFiles, HttpServletRequest req) {
        if (uploadFiles.length > 0) {
            return saveFile(uploadFiles);
        }
        return "上传失败!";
    }

    
    public String saveFile(MultipartFile... multipartFiles) {
        StringBuilder sb = new StringBuilder();
        try {
            for (MultipartFile multipartFile : multipartFiles) {
                multipartFile.transferTo(new File(filePath, multipartFile.getOriginalFilename()));

                sb.append(filePath).append(multipartFile.getOriginalFilename()).append("n");
            }
        } catch (IOException e) {
            e.printStackTrace();
            return "上传失败!";
        }
        return sb.toString();
    }

}

页面

 
   
 
    表单单个文件上传 
     
    
 
 
   
 
   上传 

页面

 
   
 
    表单多个文件上传 
     
    
 
 
   
 
   上传 

对应js

页面

页面

Github
Gitee