axios+springboot实现文件上传（文件以及表单）、下载（post/get方式）

川长思鸟来 2024-04-18 14:14 63阅读 0赞

### 目录 ###

*   *  简介
     *  基础配置：
     *  一、文件上传
     *   *  1.单文件上传
         *  2.多文件上传
         *  3.文件+表单数据上传
     *  二、文件下载
     *   *  1.Get方式下载
         *  2.Post方式下载
         *  3.更优雅的方式（使用ResponseEntity来下载）

## 简介 ##

spring boot 的文件上传下载与 spring mvc的基本一致，只需注意一些配置即可。

文章将介绍：

上传：单文件上传方式、多文件上传方式、文件与表单数据一起提交的方式

下载：get方式、post方式

## 基础配置： ##

需要文件上传的必定是web项目，web依赖必不可少：

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

另外，我们需要在application.properties中配置以下信息：

### 文件上传相关
    # 单个文件上传最大值
    spring.servlet.multipart.max-file-size=5MB
    # 总文件上传最大值
    spring.servlet.multipart.max-request-size=5MB
    # multipart上传文件
    spring.servlet.multipart.enabled=true
    # 上传文件的临时目录
    #spring.servlet.multipart.location=
    # multipart上传文件时懒加载
    #spring.servlet.multipart.resolve-lazily=false

## 一、文件上传 ##

### 1.单文件上传 ###

①.前端上传页面：

（上传文件需要将请求头设为multipart/form-data，multipart表单和普通表单的不同，它会把表单分割成块，表单中的每个字段对应一个块，每个块都有自己的数据类型即Content-Type。然后利用FormData对象将数据包装。最后通过axios发送到后台指定的Controller）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="uploadApp">
    
        <h2>上传</h2>
        <input type="file"/>
        <br/><br/><br/>
        <button @click="goUpload" style="width: 80px;height: 30px;">上传</button>
    
        <hr/>
        <span>{
       { saveFileName }}</span>    
    </div>
    
    <script src="/js/public/vue.min.js"></script>
    <script src="/js/public/axios.min.js"></script>
    
    <script> let app = new Vue({ el: '#uploadApp', data: { saveFileName: '' }, methods: { //图片校验 verifyFile: (file) => { if (file == null) { alert('请上传图片！'); return false; } let img_regexp = /^image\/\w+/g; if (!img_regexp.test(file.type)) { alert('上传的不是图片，请重新选择！'); return false; } if (file.size > 5 * 1024 * 1024) { alert('上传的图片大于5MB，请重新选择！'); return false; } return true; }, goUpload: () => { let file = document.querySelector('input[type=file]').files[0]; //if(!app.verifyFile(file)){ // return; //} let formData = new window.FormData(); formData.append('file', file); axios({ method: "POST", url: "/upload", headers: { 'Content-Type': 'multipart/form-data' //注意这里 }, data: formData }).then((res) => { //这里返回保存的文件名 app.saveFileName = res.data; }).catch((err) => { console.log(err) }); } } }) </script>
    </body>
    </html>

②.后端接收Controller：

（将上传的文件映射到`MultipartFile`即可）

//返回保存的文件名
    @PostMapping("/upload")
    @ResponseBody
    public String uploadFile(@RequestParam("file") MultipartFile multipartFile) 
        return copyFile(multipartFile);
    }
    
    /** * 保存文件 * * @param file * @return 保存的文件名 */
    private String copyFile(MultipartFile file) { 
        String originalFilename = file.getOriginalFilename();
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        String s = UUID.randomUUID().toString();
        //s = s.replaceAll("-", "");
        String newName = s + suffix;
        String parentPath = getParentPath();
        File dest = new File(parentPath, newName);
        try { 
            //目录不存在则创建，依赖google的guava工具包
            Files.createParentDirs(dest);
            file.transferTo(dest);
            return newName;
        } catch (IOException e) { 
            e.printStackTrace();
        }
        return null;
    }
    
    private String getParentPath() { 
        String parentPath = "";
        //默认存储classpath目录，可修改为可配置
        if (StringUtils.isBlank(baseStoreDir)) { 
            String rootUri = ClassUtils.getDefaultClassLoader().getResource("").getPath();
            parentPath = rootUri + File.separator + "upload";
        } else { 
            parentPath = baseStoreDir;
        }
        return parentPath;
    }
    
    //从配置中读取文件保存的目录
    @Value("${com.example.demo.baseStoreDir:''}")
    private String baseStoreDir;

③.运行测试

页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhY2tidWc_size_16_color_FFFFFF_t_70]

### 2.多文件上传 ###

多文件上传其实与单文件类似，只需要使用\`\`MultipartFile`[]`接收即可

①.前端页面：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="uploadApp">
    
        <input type="file" id="file1" /><br/><br/><br/>
        <input type="file" id="file2" /><br/><br/><br/>
        <button @click="goUpload" style="width: 80px;height: 30px;">上传</button>
    
        <hr/>
        <p v-for="(i,index) in saveFileNames">{
       { i }}</p>
    
    
    </div>
    
    <script src="/js/public/jquery-3.4.1.min.js"></script>
    <script src="/js/public/vue.min.js"></script>
    <script src="/js/public/axios.min.js"></script>
    
    <script> let app = new Vue({ el: '#uploadApp', data: { saveFileNames: [] }, methods: { goUpload: () => { let formData = new window.FormData(); formData.append('file', $('#file1').prop('files')[0]); formData.append('file', $('#file2').prop('files')[0]); axios({ method: "POST", url: "/uploadFiles", headers: { 'Content-Type': 'multipart/form-data' }, data: formData }).then(function (res) { console.log(res); app.saveFileNames = res.data; }).catch(function (err) { console.log(err) }); } } }) </script>
    </body>
    </html>

②.后端接收Controller：

//返回所有保存的文件名
    @PostMapping("/uploadFiles")
    @ResponseBody
    public List<String> uploadFiles(@RequestParam("file") MultipartFile[] multipartFiles) { 
        List<String> resultList = new ArrayList<>();
        for (MultipartFile multipartFile : multipartFiles) { 
            //copyFile方法见第一个单文件上传
            String s = copyFile(multipartFile);
            resultList.add(s);
        }
        return resultList;
    }

③.页面效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhY2tidWc_size_16_color_FFFFFF_t_70 1]

### 3.文件+表单数据上传 ###

①.前端页面：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="uploadApp">
    
        <span>姓名：</span><input type="text" v-model="bean.name"/><br/>
        <span>年龄：</span><input type="text" v-model="bean.age"/><br/>
        <input type="file"/><br/><br/><br/>
        <button @click="goUpload" style="width: 80px;height: 30px;">上传</button>
    
        <hr/>
        <span>{
       { saveFileName }}</span>
    
    
    </div>
    
    <script src="/js/public/vue.min.js"></script>
    <script src="/js/public/axios.min.js"></script>
    
    <script> let app = new Vue({ el: '#uploadApp', data: { bean: { }, saveFileName: '' }, methods: { goUpload: () => { let file = document.querySelector('input[type=file]').files[0]; let list = { "name": app.bean.name, "age": parseInt(app.bean.age) }; let formData = new window.FormData(); //这里将表单数据封装成json保存到formData中 formData.append("formData", new Blob([JSON.stringify(list)], { type: "application/json"})); formData.append('file', file); axios({ method: "POST", url: "/uploadFileAndData", headers: { 'Content-Type': 'multipart/form-data' }, data: formData }).then(function (res) { console.log(res); app.saveFileName = res.data; }).catch(function (err) { console.log(err) }); } } }) </script>
    </body>
    </html>

②.后端代码：

import lombok.Data;
    
    @Data
    public class FormData { 
    
        private String name;
    
        private Integer age;
    }

Controller：

/** * 1.@RequestPart这个注解用在multipart/form-data表单提交请求的方法上。 * 2.支持的请求方法的方式MultipartFile，属于Spring的MultipartResolver类。这个请求是通过http协议传输的。 * 3.@RequestParam也同样支持multipart/form-data请求。 * 4.他们最大的不同是，当请求方法的请求参数类型不再是String类型的时候。 * 5.@RequestParam适用于name-valueString类型的请求域，@RequestPart适用于复杂的请求域（像JSON，XML）。 */
    @PostMapping("/uploadFileAndData")
    @ResponseBody
    public String uploadFileWithFormData(@RequestPart("formData") FormData formData, @RequestPart("file") MultipartFile multipartFile) { 
        System.err.println(formData);
        
        //copyFile方法见第一个单文件上传
        return copyFile(multipartFile);
    }

③.测试效果：

页面：  
![在这里插入图片描述][20190907212358104.png]

后台控制台：  
![在这里插入图片描述][2019090721241552.png]

## 二、文件下载 ##

### 1.Get方式下载 ###

①.后端代码：

（即通过流读取文件写入response）

//fileName即要下载的文件名
    @GetMapping("/getDownload")
    public void downloadFileByGet(@RequestParam String fileName, HttpServletRequest request, HttpServletResponse response) { 
        if (StringUtils.isBlank(fileName)) { 
            return;
        }
        //getParentPath是获取文件保存的目录（可参考第一个单文件上传模块）
        String parentPath = getParentPath();
        File file = new File(parentPath, fileName);
        if (!file.exists()) { 
            return;
        }
        BufferedInputStream bis = null;
        try { 
            response.setContentType("application/octet-stream");
            //response.setContentType("application/force-download");
            response.addHeader("Content-Disposition", "attachment;fileName=" + URLEncoder.encode(fileName, "UTF-8"));// 设置文件名
            byte[] buffer = new byte[1024];
            bis = new BufferedInputStream(new FileInputStream(file));
            OutputStream os = response.getOutputStream();
            int i = -1;
            while ((i = bis.read(buffer)) != -1) { 
                os.write(buffer, 0, i);
            }
            os.flush();
        } catch (Exception e) { 
            e.printStackTrace();
        } finally { 
            try { 
                bis.close();
            } catch (Exception e) { 
            }
        }
    }

②.前端页面：

### 2.Post方式下载 ###

①.后端代码：

（后端代码其实与get方式一样，只不过接收参数的方式变一下而已，这里就不细写了）

@PostMapping("/postDownload")
    public void downloadFileByPost(@RequestBody String fileName, HttpServletRequest request, HttpServletResponse response) { 
    
    }

②.前端代码：

（其实post请求是无法下载的，因为是个字符型的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的，说白点就是js无法调用到浏览器的下载处理机制和程序。）

（这里的post下载本质上还是get，主意这里请求要加上`responseType: 'blob'`）

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="downloadApp">
    
        <h2>下载</h2>
        <span>{
       { saveFileName }}</span>
        <br/><br/><br/>
        <button @click="goDownloadByPost" style="width: 80px;height: 30px;">POST下载</button>
    
    </div>
    
    <script src="/js/public/vue.min.js"></script>
    <script src="/js/public/axios.min.js"></script>
    
    <script> let app = new Vue({ el: '#downloadApp', data: { saveFileName: '9950187b-7a4c-48b6-85e0-745991e07433.png' }, methods: { goDownloadByPost: () => { axios({ method: "POST", url: "/postDownload", headers:{ 'Content-Type': 'application/json' }, data: app.saveFileName, responseType: 'blob' //注意这里 }).then((res) => { console.log(res) let blob = res.data; // 创建一个URL指向Blob，也就是Blob URL let url = window.URL.createObjectURL(blob); // 创建<a>标签 let el = document.createElement('a'); el.href = url; // 指定下载的文件名 el.download = app.saveFileName; el.hidden = true; document.body.appendChild(el); el.click(); document.body.removeChild(el); //或者 //let reader = new FileReader(); //reader.readAsDataURL(blob); //reader.onload = (e) => { // //todo 大文件没有下载弹框，待求证 // let a = document.createElement('a'); // a.download = app.saveFileName; // a.href = e.target.result; // document.body.appendChild(a); // a.click(); // document.body.removeChild(a); //} }).catch((err) => { console.log(err); }); } } }) </script>
    </body>
    </html>

### 3.更优雅的方式（使用ResponseEntity来下载） ###

利用springmvc提供的ResponseEntity类型,使用它可以很方便地定义返回的HttpHeaders和HttpStatus。

不用暴露HttpServletResponse接口。

@GetMapping("/download2")
    public ResponseEntity<Object> downloadFile2(@RequestParam String fileName) { 
        String parentPath = getParentPath();
        File file = new File(parentPath, fileName);
        InputStreamResource resource = null;
        try { 
            resource = new InputStreamResource(new FileInputStream(file));
        } catch (Exception e) { 
            e.printStackTrace();
        }
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", String.format("attachment;filename=\"%s", fileName));
        headers.add("Cache-Control", "no-cache,no-store,must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");
        ResponseEntity<Object> responseEntity = ResponseEntity.ok()
                .headers(headers)
                .contentLength(file.length())
                .contentType(MediaType.parseMediaType("application/octet-stream"))
                .body(resource);
        return responseEntity;
    }

完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhY2tidWc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fab036d88f0e4be383f63a5fcbe294cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhY2tidWc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5e1a270fe57c4eaa9ae636295d4bdb25.png
[20190907212358104.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0fa8f61a3633446c8911d6236d053927.png
[2019090721241552.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/589137cbce634e4a82468414c343549f.png