注：一些实体类数据自行修改 

1，api文件 

import request from '@/router/axiosInfo';export const uploadChunk = (data) => { return request({ url: '/api/blade-sample/sample/covid19/uploadChunk', method: 'post', data })}export const uploadMerge = (data) => { return request({ url: '/api/blade-sample/sample/covid19/uploadMerge', method: 'post', data })}

2， axios文件

/** * 全站http配置 * * axios参数说明 * isSerialize是否开启form表单提交 * isToken是否需要token */import axios from 'axios';import store from '@/store/';import router from '@/router/router';import { serialize } from '@/util/util';import { getToken } from '@/util/auth';import { Message } from 'element-ui';import { isURL } from "@/util/validate";import website from '@/config/website';import { Base64 } from 'js-base64';import { baseUrl } from '@/config/env';// import NProgress from 'nprogress';// import 'nprogress/nprogress.css';import crypto from '@/util/crypto';//默认超时时间axios.defaults.timeout = 100000;//返回其他状态码axios.defaults.validateStatus = function (status) { return status >= 200 && status <= 500;};//跨域请求，允许保存cookieaxios.defaults.withCredentials = true;// NProgress 配置// NProgress.configure({// showSpinner: false// });//http request拦截axios.interceptors.request.use(config => { //开启 progress bar // NProgress.start(); //地址为已经配置状态则不添加前缀 if (!isURL(config.url) && !config.url.startsWith(baseUrl)) { config.url = baseUrl + config.url } //headers判断是否需要 const authorization = config.authorization === false; if (!authorization) { config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`; } //headers判断请求是否携带token const meta = (config.meta || {}); const isToken = meta.isToken === false; //headers传递token是否加密 const cryptoToken = config.cryptoToken === true; //判断传递数据是否加密 const cryptoData = config.cryptoData === true; const token = getToken(); if (token && !isToken) { config.headers[website.tokenHeader] = cryptoToken ? 'crypto ' + crypto.encryptAES(token, crypto.cryptoKey) : 'bearer ' + token; } // 开启报文加密 if (cryptoData) { if (config.params) { const data = crypto.encryptAES(JSON.stringify(config.params), crypto.aesKey); config.params = { data }; } if (config.data) { config.text = true; config.data = crypto.encryptAES(JSON.stringify(config.data), crypto.aesKey); } } //headers中配置text请求 if (config.text === true) { config.headers["Content-Type"] = "text/plain"; } //headers中配置serialize为true开启序列化 if (config.method === 'post' && meta.isSerialize === true) { config.data = serialize(config.data); } return config}, error => { return Promise.reject(error)});//http response 拦截axios.interceptors.response.use(res => { //关闭 progress bar // NProgress.done(); //获取状态码 const status = res.data.code || res.status; const statusWhiteList = website.statusWhiteList || []; const message = res.data.msg || res.data.error_description || '未知错误'; const config = res.config; const cryptoData = config.cryptoData === true; //如果在白名单里则自行catch逻辑处理 if (statusWhiteList.includes(status)) return Promise.reject(res); //如果是401则跳转到登录页面 if (status === 401) store.dispatch('FedLogOut').then(() => router.push({ path: '/login' })); // 如果请求为非200否者默认统一处理 if (status !== 200) { Message({ message: message, type: 'error' }); return Promise.reject(new Error(message)) } // 解析加密报文 if (cryptoData) { res.data = JSON.parse(crypto.decryptAES(res.data, crypto.aesKey)); } return res;}, error => { // NProgress.done(); return Promise.reject(new Error(error));});export default axios;

3，vue源码 

<template> <el-upload class="upload-demo" :on-change="handleChange" :show-file-list="false" :limit="1"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadMerge" v-loading.fullscreen.lock='loading'>上传到服务器</el-button> <el-progress :percentage="percentage" :color="customColor"></el-progress> </el-upload></template><script>import { uploadMerge, uploadChunk } from "@/api/sample/sampleCovid19Info";export default { data() { return { percentage: 0, customColor: '#409eff', fileList: [], // 文件列表 chunks: [], // 切片数组 currentChunkIndex: 0, // 当前切片索引 totalChunks: 0, // 总切片数 currentFile: null, // 当前处理文件 totalSize: 0, loading: false }; }, methods: { async uploadMerge() { this.loading = true const formData = new FormData(); formData.append('fileName', this.currentFile.name); formData.append('totalSize', this.totalSize); console.log(22222); try { let res = await uploadMerge({ fileName: this.currentFile.name, totalSize: this.totalSize }) console.log(res, '2'); if (res.data.code === 200) { this.fileList = [] this.chunks = [] this.currentChunkIndex = 0 this.totalChunks = 0 this.currentFile = null this.totalSize = 0 this.$message({ type: "success", message: "添加成功!" }); this.loading = false } else { this.$message({ type: "success", message: "添加失败!" }); this.loading = false } } catch (error) { this.$message.error(error) } finally { this.loading = false } }, handleChange(file, fileList) { this.totalSize = file.size // 当文件变化时，执行切片操作 if (file.status === 'ready') { this.currentFile = file.raw; // 获取原始文件对象 this.sliceFile(this.currentFile); } }, async sliceFile(file) { const chunkSize = 1024 * 1024 * 10; // 切片大小设置为1MB const totalSize = file.size; this.totalChunks = Math.ceil(totalSize / chunkSize); for (let i = 0; i < this.totalChunks; i++) { const start = i * chunkSize; const end = Math.min(start + chunkSize, totalSize); const chunk = file.slice(start, end); this.chunks.push(chunk); const formData = new FormData(); formData.append('chunk', chunk); formData.append('chunkIndex', i); formData.append('totalChunks', this.totalChunks); formData.append('fileName', this.currentFile.name); formData.append('totalSize', this.totalSize); let res = await uploadChunk(formData) if (res.data.code === 200) { this.currentChunkIndex = i + 1; if (this.percentage != 99) { this.percentage = i + 1; } //判断文件是否上传完成 if (this.currentChunkIndex === this.totalChunks) { this.percentage = 100 this.$message({ type: "success", message: "上传成功!" }); } } } } }}</script>

4，切片请求接口

/** * 大上传文件 */@PostMapping("/uploadChunk")@ApiOperationSupport(order = 15)@ApiOperation(value = "大上传文件", notes = "大上传文件")public R uploadChunk(@RequestParam("chunk") MultipartFile chunk, @RequestParam("chunkIndex") Integer chunkIndex, @RequestParam("totalChunks") Integer totalChunks, @RequestParam("fileName") String fileName, @RequestParam("totalSize") Long totalSize) throws IOException { Boolean isOk = sampleCovid19Service.LargeFiles(chunk, chunkIndex, totalChunks, fileName, totalSize); return R.status(isOk);}

/** * 大上传文件 * @param chunk 文件流 * @param chunkIndex 切片索引 * @param totalChunks 切片总数 * @param fileName 文件名称 * @param totalSize 文件大小 * @return */Boolean LargeFiles(MultipartFile chunk, Integer chunkIndex, Integer totalChunks, String fileName, Long totalSize);

/** * 大上传文件 * @param chunk 文件流 * @param chunkIndex 切片索引 * @param totalChunks 切片总数 * @param fileName 文件名称 * @param totalSize 文件大小 * @return */@Overridepublic Boolean LargeFiles(MultipartFile chunk, Integer chunkIndex, Integer totalChunks, String fileName, Long totalSize) { if (chunk == null) { throw new ServiceException("添加失败,文件名称获取失败"); } if (chunkIndex == null) { throw new ServiceException("添加失败,分片序号不能为空"); } if (fileName == null) { throw new ServiceException("添加失败,文件名称获取失败"); } if (totalSize == null || totalSize == 0) { throw new ServiceException("添加失败,文件名大小不能为空或0"); } //获取文件名称 fileName = fileName.substring(0, fileName.lastIndexOf(".")); File chunkFolder = new File(chunkPath + totalSize + "/" + fileName); //判断文件路径是否创建 if (!chunkFolder.exists()) { chunkFolder.mkdirs(); } //直接将文件写入 File file = new File(chunkPath + totalSize + "/" + fileName + "/" + chunkIndex); try { chunk.transferTo(file); } catch (IOException e) { log.info("时间：{}" + new Date() + "文件名称:{}" + fileName + "上传失败"); throw new ServiceException("时间：{}" + new Date() + "文件名称:{}" + fileName + "上传失败"); } return true;}

 5，合并接口

package org.springblade.sample.vo;import lombok.Data;@Datapublic class UploadMergeVO { //文件上传名称 private String fileName; //文件大小 private Long totalSize;}

/** * 大文件合并 */@PostMapping("/uploadMerge")@ApiOperationSupport(order = 16)@ApiOperation(value = "文件合并", notes = "文件合并")public R uploadMerge(@RequestBody UploadMergeVO vo) throws IOException { Boolean isOk = sampleCovid19Service.LargeMerge(vo); return R.status(isOk);}

/** * 大文件合并 * @param vo * @return * @throws IOException */Boolean LargeMerge(UploadMergeVO vo) throws IOException;

/** * 大文件合并 * @param vo * @return * @throws IOException */@Overridepublic Boolean LargeMerge(UploadMergeVO vo) throws IOException { if (StringUtil.isBlank(vo.getFileName())) { throw new ServiceException("上传失败,文件名称获取失败"); } if (vo.getTotalSize() == 0) { throw new ServiceException("上传失败,文件大小不能为空"); } //块文件目录 String fileNameInfo = vo.getFileName().substring(0, vo.getFileName().lastIndexOf(".")); //合并文件夹 File chunkFolder = new File(chunkPath + vo.getTotalSize() + "/" + fileNameInfo + "/"); File depositFile = new File(sourceFile + vo.getTotalSize() + "/" + fileNameInfo + "/"); //创建文件夹 if (!depositFile.exists()) { depositFile.mkdirs(); } //创建新的合并文件 File largeFile = new File(depositFile + "/" + vo.getFileName()); largeFile.createNewFile(); //用于写文件 RandomAccessFile raf_write = new RandomAccessFile(largeFile, "rw"); //指针指向文件顶端 raf_write.seek(0); //缓冲区 byte[] b = new byte[1024]; //分块列表 File[] fileArray = chunkFolder.listFiles(); // 转成集合，便于排序 List<File> fileList = Arrays.asList(fileArray); // 从小到大排序 Collections.sort(fileList, new Comparator<File>() { @Override public int compare(File o1, File o2) { return Integer.parseInt(o1.getName()) - Integer.parseInt(o2.getName()); } }); //合并文件 for (File chunkFile : fileList) { RandomAccessFile raf_read = new RandomAccessFile(chunkFile, "rw"); int len = -1; while ((len = raf_read.read(b)) != -1) { raf_write.write(b, 0, len); } raf_read.close(); } raf_write.close(); //取出合并文件大小和hash long fileSize = getFileSize(largeFile); int hashCode = largeFile.hashCode(); //判断是否合并成功 if (fileSize == vo.getTotalSize()) { //将内容写入数据库 FileBack fileBack = new FileBack(); fileBack.setFileName(vo.getFileName()); fileBack.setFileSize(Integer.parseInt(String.valueOf(vo.getTotalSize()))); fileBack.setUpdateTime(new Date()); fileBack.setFileUrl(chunkFolder.toString()); fileBack.setFileHash(String.valueOf(hashCode)); fileBack.setUploadData(new Date()); fileBackService.save(fileBack); //删除临时文件目录 File chunkFolderInfo = new File(chunkPath + vo.getTotalSize() + "/"); FileUtils.deleteDirectory(chunkFolderInfo); log.info("时间：{}" + new Date() + "文件名称:{}" + vo.getFileName() + "上传成功"); return true; } else { //删除临时文件目录 File chunkFolderInfo = new File(chunkPath + vo.getTotalSize() + "/"); FileUtils.deleteDirectory(chunkFolderInfo); log.info("时间：{}" + new Date() + "文件名称:{}" + vo.getFileName() + "上传失败"); return false; }}