注:一些实体类数据自行修改
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;
};
//跨域请求,允许保存cookie
axios.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 */ @Override public 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; @Data public 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 */ @Override public 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; } }