[Java知识库]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 "上传失败!";
    }

    /**
     *
     * @param multipartFiles
     * @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();
    }

}

三、表单实现文件上传

实现单文件上传

页面

<form role="form" action="/file/upload" target="myIframe" method="post" enctype="multipart/form-data"> 
   <div class="form-group"> 
    <label for="exampleInputFile">表单单个文件上传</label> 
    <input type="file" id="exampleInputFile" name="file" value="请选择文件" /> 
    <p class="help-block"> </p> 
   </div> 
   <button type="submit" class="btn btn-default">上传</button> 
</form>

实现多文件上传

页面

<form role="form" action="/file/uploads" target="myIframe" method="post" enctype="multipart/form-data"> 
   <div class="form-group"> 
    <label for="exampleInputFile">表单多个文件上传</label> 
    <input type="file" id="exampleInputFiles" name="files" value="请选择文件" multiple="" /> 
    <p class="help-block"> </p> 
   </div> 
   <button type="submit" class="btn btn-default">上传</button> 
</form>

效果截图

四、使用vue + axios 实现文件上传

引入js文件

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.js"></script>

对应js

<script type="text/javascript">
    var v = new Vue({
        el: '#main',
        data: {
        },
        methods: {
            //单个文件上传
            uploadFile: function (e) {
                var file = e.target.files[0];
                var formData = new FormData();
                formData.append("file", file)
                axios.post(
                    '/file/upload',
                    formData,
                    {headers: {'Content-Type': 'multipart/form-data'}}
                ).then(function (res) {
                    console.log(res.data)
                    const doc = document.getElementById("myIframe").contentDocument || document.frames["myIframe"].document;
                    doc.body.innerText = res.data;
                })
            },
            //多个文件上传
            uploadFiles: function (e) {
                var files = e.target.files;
                var formData = new FormData();
                files = Array.from(files); // files是类数组，需要先转为数组
                files.forEach((file) => {
                    formData.append("files", file);
                });
                axios.post(
                    '/file/uploads',
                    formData,
                    {headers: {'Content-Type': 'multipart/form-data'}}
                ).then(function (res) {
                    console.log(res.data)
                    const doc = document.getElementById("myIframe").contentDocument || document.frames["myIframe"].document;
                    doc.body.innerText = res.data;
                })
            }
        }
    });
</script>

实现单文件上传

页面

 <input type="file" name="upload-file" id="upload-file" @change="uploadFile">

实现多文件上传

页面

 <input type="file" name="upload-file" id="upload-files" @change="uploadFiles" multiple>

效果图

最后附带源码地址

Github
Gitee