Spring Boot 2.x（十六）：玩转Vue文件上传

为什么使用Vue-Simple-Uploader

最近用到了Vue + Spring Boot来完成文件上传的操作，踩了一些坑，对比了一些Vue的组件，发现了一个很好用的组件——Vue-Simple-Uploader，先附上gayhub的

，再说说为什么选用这个组件，对比vue-ant-design和element-ui的上传组件，它能做到更多的事情，比如：

• 可暂停、继续上传
• 上传队列管理，支持最大并发上传
• 分块上传
• 支持进度、预估剩余时间、出错自动重试、重传等操作
• 支持“快传”，通过文件判断服务端是否已存在从而实现“快传”

由于需求中需要用到断点续传，所以选用了这个组件，下面我会从最基础的上传开始说起：

单文件上传、多文件上传、文件夹上传

Vue代码：

 					<uploader
        :options="uploadOptions1"
        :autoStart="true"
        class="uploader-app"
      >
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <uploader-btn style="margin-right:20px;" :attrs="attrs">选择文件</uploader-btn>
          <uploader-btn :attrs="attrs" directory>选择文件夹</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
</uploader>

该组件默认支持多文件上传，这里我们从官方demo中粘贴过来这段代码，然后在uploadOption1中配置上传的路径即可，其中uploader-btn 中设置directory属性即可选择文件夹进行上传。

uploadOption1：

 uploadOptions1: {
   
        target: "//localhost:18080/api/upload/single",//上传的接口
        testChunks: false, //是否开启服务器分片校验
        fileParameterName: "file",//默认的文件参数名
        headers: {
   },
        query() {
   },
        categaryMap: {
    //用于限制上传的类型
          image: ["gif", "jpg", "jpeg", "png", "bmp"]
        }
}

在后台的接口的编写，我们为了方便，定义了一个chunk类用于接收组件默认传输的一些后面方便分块断点续传的参数：

Chunk类

@Data
public class Chunk implements Serializable {
   
    
    private static final long serialVersionUID = 7073871700302406420L;

    private Long id;
    /**
     * 当前文件块，从1开始
     */
    private Integer chunkNumber;
    /**
     * 分块大小
     */
    private Long chunkSize;
    /**
     * 当前分块大小
     */
    private Long currentChunkSize;
    /**
     * 总大小
     */
    private Long totalSize;
    /**
     * 文件标识
     */
    private String identifier;
    /**
     * 文件名
     */
    private String filename;
    /**
     * 相对路径
     */
    private String relativePath;
    /**
     * 总块数
     */
    private Integer totalChunks;
    /**
     * 文件类型
     */
    private String type;

    /**
     * 要上传的文件
     */
    private MultipartFile file;
}

在编写接口的时候，我们直接使用这个类作为参数去接收vue-simple-uploader传来的参数即可，注意这里要使用POST来接收哟~

接口方法：

    @PostMapping("single")
    public void singleUpload(Chunk chunk) {
   
   		     	// 获取传来的文件
        MultipartFile file = chunk.getFile();
        // 获取文件名
        String filename = chunk.getFilename();
        try {
   
            // 获取文件的内容
            byte[] bytes = file.getBytes();
            // SINGLE_UPLOADER是我定义的一个路径常量，这里的意思是，如果不存在该目录，则去创建
            if (!Files.isWritable(Paths.get(SINGLE_FOLDER))) {
   
                Files.createDirectories(Paths.get(SINGLE_FOLDER));
            }
            // 获取上传文件的路径
            Path path = Paths.get(SINGLE_FOLDER,filename);
            // 将字节写入该文件
            Files.write(path, bytes);
        } catch (IOException e) {
   
            e.printStackTrace();
        }
    }

这里需要注意一点，如果文件过大的话，Spring Boot后台会报错

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExcee