Springboot + Vue实现大文件切片上传

Springboot + Vue实现大文件切片上传

大文件切片上传原理就是将一个大文件分成若干份大小相等的块文件，等所有块上传成功后，再将文件进行合并。

一、Springboot后端

1.实体TChunkInfo.java

import org.springframework.web.multipart.MultipartFile;
import java.io.Serializable;
@Data
public class TChunkInfo implements Serializable {
   
	private static final long serialVersionUID = 1L;
	private String 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 transient MultipartFile upfile;
    }

2.实体TFileInfoVO.java

import java.io.Serializable;
/**
 * 文件模型参数
 * @author YouZ
 */
@Data
public class TFileInfoVO implements Serializable {
   
	private static final long serialVersionUID = 1L;
	//附件编号
	private String id;
	//附件类型
    private String fileType;
	//附件名称
    private String name;
    //附件总大小
    private Long size;
    //附件地址
    private String relativePath;
    //附件MD5标识
    private String uniqueIdentifier;
    //附件所属项目ID
    private String refProjectId;
    }

3.文件切片上传及切片合并接口

@RestController
@RequestMapping("/uploader")
public class FileController {
   
    private static String FILENAME = "";
    @Value("${YouZ.upload.file.path}")
    private String decryptFilePath;
    @Value("${YouZ.upload.file.temp}")
    private String decryptFilePathTemp;
    /**
     * 上传文件块
     * @param chunk
     * @return
     */
    @PostMapping("/chunk")
    public String uploadChunk(TChunkInfo chunk) throws IOException{
   
    	String apiRlt = "200";
        MultipartFile file = chunk.getUpfile();
        String guid = chunk.getIdentifier();
        Integer chunkNumber = chunk.getChunkNumber();
        System.out.println("guid:" + guid);
        File outFile = new File(decryptFilePathTemp+File.separator+guid, chunkNumber + ".part");
        if ("".equals(FILENAME))</