使用Vue和Spring Boot实现文件上传

妖狐艹你老母 2022-11-21 04:08 213阅读 0赞

**推荐：**[Vue学习汇总][Vue]

## 使用Vue和Spring Boot实现文件上传 ##

**推荐**

*  [使用Vue和Spring Boot实现文件下载][Vue_Spring Boot]

文件上传是日常开发中很常见的业务需求，这里博主通过使用Vue和Spring Boot实现一个简单的文件上传小例子。

前端：

<template>
        <div class="blog">
            <div class="upload">
                <input type="file" @change="fileChoose($event)">
                <button @click="submit()"><span>提交</span></button>
            </div>
        </div>
    </template>
    <script>
    export default{ 
        name:'blog',
        data(){ 
            return { 
                file:'',
            }
        },
        methods:{ 
            fileChoose(event){ 
                this.file = event.target.files[0];        //获取文件
                console.log(event)
            },
            submit(){ 
                let file = new FormData();
                file.append("file", this.file);
                this.axios.post('/file/upload',
                    file ,
                    { headers: { 'Content-Type': 'multipart/form-data'}}
                ).then((res)=>{ 
                    this.$message.success('文件上传成功');
                }).catch((res)=>{ 
                    this.$message.error('文件上传失败');
                })
            },
        }
    }
    </script>

不懂`FormData`可以自己去百度一下，`{headers: {'Content-Type': 'multipart/form-data'}}`这个需要加上。

页面如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]  
`router:js`：

import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router);
    
    export default new Router({ 
      routes:[
        { 
          path:'/',
          redirect:'/blog',
        },
        { 
          path: '/blog',
          name: 'blog',
          component: () => import('./pages/blog.vue')
        }
      ]
    });

`vue.config.js`：

module.exports = { 
      devServer:{ 
        host:'localhost',
        port:8080,
        proxy:{ 
          '/api':{ 
            target:'http://127.0.0.1:8081',
            changeOrigin:true,
            pathRewrite:{ 
              '/api':''
            }
          }
        }
      },
      lintOnSave:false,
      productionSourceMap:true
    }

后端：  
`pom.xml`：

<?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
    
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.3.4.RELEASE</version>
            <relativePath/> 
        </parent>
    
        <groupId>com.kaven</groupId>
        <artifactId>system</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    
        <name>system</name>
        <description>系统</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    </project>

`application.yml`：

spring:
      servlet:
        multipart:
          max-file-size: 500MB
          max-request-size: 500MB
    
    logging:
      pattern:
        console: '[%p]-%m%n'
    
    server:
      port: 8081

启动类：

package com.kaven.system;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    public class Application { 
    
        public static void main(String[] args){ 
            SpringApplication.run(Application.class, args);
        }
    }

`FileController`：

package com.kaven.system.controller;
    
    import com.kaven.system.enums.ResponseEnum;
    import com.kaven.system.vo.ResponseVo;
    import org.apache.tomcat.util.http.fileupload.IOUtils;
    import org.junit.platform.commons.util.StringUtils;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.FileOutputStream;
    import java.io.IOException;
    import java.io.InputStream;
    
    @RestController
    @RequestMapping("/file")
    public class FileController { 
    
    
        @PostMapping(value="/upload", headers="content-type=multipart/form-data")
        public ResponseVo upload(@RequestParam(value = "file") MultipartFile file) throws IOException, InterruptedException { 
    
            System.out.println("有文件上传请求进来了");
            FileOutputStream fileOutputStream = null;
            InputStream inputStream = null;
    
            try { 
                if (file != null) { 
                    String fileName = file.getOriginalFilename();
                    if (StringUtils.isNotBlank(fileName)) { 
                        java.io.File outFile = new java.io.File("E:\\"+fileName);
                        if (outFile.getParentFile() != null || !outFile.getParentFile().isDirectory()) { 
                            // 创建父文件夹
                            outFile.getParentFile().mkdirs();
                        }
    
                        fileOutputStream = new FileOutputStream(outFile);
                        inputStream = file.getInputStream();
                        IOUtils.copy(inputStream, fileOutputStream);
                    }
                }
                else { 
                    return ResponseVo.error(ResponseEnum.File_NOT_EXIST);
                }
            } catch (Exception e) { 
                e.printStackTrace();
                return ResponseVo.error(ResponseEnum.ERROR);
            } finally { 
                if (fileOutputStream != null) { 
                    fileOutputStream.flush();
                    fileOutputStream.close();
                }
            }
            return ResponseVo.success(ResponseEnum.SUCCESS);
        }
    }

`ResponseVo<T>`：

package com.kaven.system.vo;
    
    import com.fasterxml.jackson.annotation.JsonInclude;
    import com.kaven.system.enums.ResponseEnum;
    import lombok.Data;
    
    @Data
    @JsonInclude(value = JsonInclude.Include.NON_NULL)
    public class ResponseVo<T> { 
    
        private Integer status;
    
        private String msg;
    
        private T data;
    
        private ResponseVo(Integer status, String msg) { 
            this.status = status;
            this.msg = msg;
        }
    
        private ResponseVo(Integer status, T data) { 
            this.status = status;
            this.data = data;
        }
    
        public static <T> ResponseVo<T> success(T data){ 
            return new ResponseVo<T>(ResponseEnum.SUCCESS.getCode(), data);
        }
    
        public static <T> ResponseVo<T> error(ResponseEnum responseEnum){ 
            return new ResponseVo<T>(responseEnum.getCode() , responseEnum.getDesc());
        }
    }

`ResponseEnum`：

package com.kaven.system.enums;
    
    import lombok.Getter;
    
    @Getter
    public enum ResponseEnum { 
    
        ERROR(-1 ,"服务端错误"),
    
        SUCCESS(0, "成功"),
    
        File_NOT_EXIST(13 , "文件为空"),
    
        ;
    
        Integer code;
    
        String desc;
    
        ResponseEnum(Integer code, String desc) { 
            this.code = code;
            this.desc = desc;
        }
    }

测试：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 4]  
分析：

this.file = event.target.files[0];        //获取文件

为什么获取文件是这行代码？  
通过`console.log(event)`，从`Console`中可以看到选择文件触发的事件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 5]  
从上图可以知道，通过`srcElement`也可以获取文件，也确实如此。

<template>
        <div class="blog">
            <div class="upload">
                <input type="file" @change="fileChoose($event)">
                <button @click="submit()"><span>提交</span></button>
            </div>
        </div>
    </template>
    <script>
    export default{ 
        name:'blog',
        data(){ 
            return { 
                file:'',
            }
        },
        methods:{ 
            fileChoose(event){ 
                this.file = event.srcElement.files[0];        //获取文件
                console.log(event)
            },
            submit(){ 
                let file = new FormData();
                file.append("file", this.file);
                this.axios.post('/file/upload',
                    file ,
                    { headers: { 'Content-Type': 'multipart/form-data'}}
                ).then((res)=>{ 
                    this.$message.success('文件上传成功');
                }).catch((res)=>{ 
                    this.$message.error('文件上传失败');
                })
            },
        }
    }
    </script>

但是这种方式不推荐使用。  
![在这里插入图片描述][20201030111126496.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 6]  
由上图可知，还可以进一步获取文件名称、大小、类型。

而后端通过`MultipartFile`类型实例来接收文件。

`MultipartFile`源码如下：

package org.springframework.web.multipart;
    
    import java.io.File;
    import java.io.IOException;
    import java.io.InputStream;
    import java.nio.file.Files;
    import java.nio.file.Path;
    
    import org.springframework.core.io.InputStreamSource;
    import org.springframework.core.io.Resource;
    import org.springframework.lang.Nullable;
    import org.springframework.util.FileCopyUtils;
    
    public interface MultipartFile extends InputStreamSource { 
    
    	/** * Return the name of the parameter in the multipart form. * @return the name of the parameter (never {@code null} or empty) */
    	String getName();
    
    	/** * Return the original filename in the client's filesystem. * <p>This may contain path information depending on the browser used, * but it typically will not with any other than Opera. * @return the original filename, or the empty String if no file has been chosen * in the multipart form, or {@code null} if not defined or not available * @see org.apache.commons.fileupload.FileItem#getName() * @see org.springframework.web.multipart.commons.CommonsMultipartFile#setPreserveFilename */
    	@Nullable
    	String getOriginalFilename();
    
    	/** * Return the content type of the file. * @return the content type, or {@code null} if not defined * (or no file has been chosen in the multipart form) */
    	@Nullable
    	String getContentType();
    
    	/** * Return whether the uploaded file is empty, that is, either no file has * been chosen in the multipart form or the chosen file has no content. */
    	boolean isEmpty();
    
    	/** * Return the size of the file in bytes. * @return the size of the file, or 0 if empty */
    	long getSize();
    
    	/** * Return the contents of the file as an array of bytes. * @return the contents of the file as bytes, or an empty byte array if empty * @throws IOException in case of access errors (if the temporary store fails) */
    	byte[] getBytes() throws IOException;
    
    	/** * Return an InputStream to read the contents of the file from. * <p>The user is responsible for closing the returned stream. * @return the contents of the file as stream, or an empty stream if empty * @throws IOException in case of access errors (if the temporary store fails) */
    	@Override
    	InputStream getInputStream() throws IOException;
    
    	/** * Return a Resource representation of this MultipartFile. This can be used * as input to the {@code RestTemplate} or the {@code WebClient} to expose * content length and the filename along with the InputStream. * @return this MultipartFile adapted to the Resource contract * @since 5.1 */
    	default Resource getResource() { 
    		return new MultipartFileResource(this);
    	}
    
    	/** * Transfer the received file to the given destination file. * <p>This may either move the file in the filesystem, copy the file in the * filesystem, or save memory-held contents to the destination file. If the * destination file already exists, it will be deleted first. * <p>If the target file has been moved in the filesystem, this operation * cannot be invoked again afterwards. Therefore, call this method just once * in order to work with any storage mechanism. * <p><b>NOTE:</b> Depending on the underlying provider, temporary storage * may be container-dependent, including the base directory for relative * destinations specified here (e.g. with Servlet 3.0 multipart handling). * For absolute destinations, the target file may get renamed/moved from its * temporary location or newly copied, even if a temporary copy already exists. * @param dest the destination file (typically absolute) * @throws IOException in case of reading or writing errors * @throws IllegalStateException if the file has already been moved * in the filesystem and is not available anymore for another transfer * @see org.apache.commons.fileupload.FileItem#write(File) * @see javax.servlet.http.Part#write(String) */
    	void transferTo(File dest) throws IOException, IllegalStateException;
    
    	/** * Transfer the received file to the given destination file. * <p>The default implementation simply copies the file input stream. * @since 5.1 * @see #getInputStream() * @see #transferTo(File) */
    	default void transferTo(Path dest) throws IOException, IllegalStateException { 
    		FileCopyUtils.copy(getInputStream(), Files.newOutputStream(dest));
    	}
    
    }

根据`MultipartFile`源码，修改一下文件上传接口：

package com.kaven.system.controller;
    
    import com.kaven.system.enums.ResponseEnum;
    import com.kaven.system.vo.ResponseVo;
    import org.junit.platform.commons.util.StringUtils;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.IOException;
    import java.nio.file.Files;
    import java.nio.file.Path;
    import java.nio.file.Paths;
    
    @RestController
    @RequestMapping("/file")
    public class FileController { 
    
    
        @PostMapping(value="/upload", headers="content-type=multipart/form-data")
        public ResponseVo upload(@RequestParam(value = "file") MultipartFile file) throws IOException, InterruptedException { 
    
            System.out.println("有文件上传请求进来了");
    
            try { 
                if (file != null) { 
                    String fileName = file.getOriginalFilename();
                    if (StringUtils.isNotBlank(fileName)) { 
                        long start = System.currentTimeMillis();
                        Path path = Paths.get("E:/"+fileName);
                        try { 
                            if(!Files.exists(path))
                                Files.createFile(path);
                        } catch (IOException e) { 
                            e.printStackTrace();
                        }
                        file.transferTo(path);
                        long end = System.currentTimeMillis();
                        System.out.println((end - start) + "ms");
                    }
                }
                else { 
                    return ResponseVo.error(ResponseEnum.File_NOT_EXIST);
                }
            } catch (Exception e) { 
                e.printStackTrace();
                return ResponseVo.error(ResponseEnum.ERROR);
            }
            return ResponseVo.success(ResponseEnum.SUCCESS);
        }
    }

前端分别上传259KB、31.6MB、315MB的文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 7]  
测试之前的方法：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 8]  
之前的方法耗时更少，但代码稍微多一点点。

使用Vue和Spring Boot实现文件上传就介绍到这里。

写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！

[Vue]: https://kaven.blog.csdn.net/article/details/109508022
[Vue_Spring Boot]: https://kaven.blog.csdn.net/article/details/109626803
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70]: /images/20221120/0d6f01ebc6194fa8a9506cde293698e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 1]: /images/20221120/c657c17e085348e5ac50c9544b9822d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 2]: /images/20221120/eda0074b779e4882aa4ad1e7d8de888d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 3]: /images/20221120/936ade670de84d53988f6d1ad1c68ae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201030110250604.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020103011050799.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70
[20201030111126496.png]: https://img-blog.csdnimg.cn/20201030111126496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201030110652950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201030114017814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201030114645988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTYwNjAz,size_16,color_FFFFFF,t_70