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

文章目录

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

一、创建项目

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

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

二、控制层代码

packagecom.king.other.controller;importio.swagger.annotations.*;importorg.springframework.web.bind.annotation.*;importorg.springframework.web.multipart.MultipartFile;importjavax.servlet.http.HttpServletRequest;importjava.io.File;importjava.io.IOException;@RestController@RequestMapping("/file")@Api(value ="文件上传接口", tags ="测试接口2")publicclassFileController{//默认上传到的路径privatefinalString filePath ="F:\\A\\";@PostMapping("/upload")@ApiOperation(value ="上传单个文件", tags ="测试接口2")publicStringupload(@RequestParam("file")MultipartFile uploadFile,HttpServletRequest req){if(!uploadFile.isEmpty()){returnsaveFile(uploadFile);}return"上传失败!";}@PostMapping("/uploads")@ApiOperation(value ="上传多个文件", tags ="测试接口2")publicStringupload(@RequestParam("files")MultipartFile[] uploadFiles,HttpServletRequest req){if(uploadFiles.length >0){returnsaveFile(uploadFiles);}return"上传失败!";}/**
     *
     * @param multipartFiles
     * @return 返回保存的路径
     */publicStringsaveFile(MultipartFile... multipartFiles){StringBuilder sb =newStringBuilder();try{for(MultipartFile multipartFile : multipartFiles){
                multipartFile.transferTo(newFile(filePath, multipartFile.getOriginalFilename()));

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

三、表单实现文件上传

实现单文件上传

页面

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

实现多文件上传

页面

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

效果截图

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

引入js文件

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

对应js

<scripttype="text/javascript">var v =newVue({
        el:'#main',
        data:{},
        methods:{//单个文件上传uploadFile:function(e){var file = e.target.files[0];var formData =newFormData();
                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 =newFormData();
                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>

实现单文件上传

页面

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

实现多文件上传

页面

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

效果图

最后附带源码地址

Github
Gitee