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(); }}

三、表单实现文件上传 实现单文件上传

页面

实现多文件上传

页面

效果截图 四、使用vue + axios 实现文件上传 引入js文件

对应js

实现单文件上传

页面

实现多文件上传

页面

效果图

最后附带源码地址

Github
Gitee