中山手机网站建设哪家好,chrome 谷歌浏览器,微信小程序支付功能开发,国外做动运服装的网站背景
如题#xff0c;最近遇到大文件上传慢的问题#xff0c;用户需要经常上传一些超过一百多M的文件#xff0c;系统由于历史原因上传功能并没有做分片上传的功能#xff0c;是整个文件上传#xff0c;并且服务器带宽限制和NGINX对文件大小的限制等问题#xff0c;所以…背景
如题最近遇到大文件上传慢的问题用户需要经常上传一些超过一百多M的文件系统由于历史原因上传功能并没有做分片上传的功能是整个文件上传并且服务器带宽限制和NGINX对文件大小的限制等问题所以决定将文件上传功能改为分片上传。
决定将上传功能修改为分片上传后遂百度分片上传的相关开源项目本项目使用的技术是Vue2antdSpringBoot但是找到的开源项目基本不合适。
前端Vue代码
1、引入依赖
// 引入SparkMD5用于计算文件MD5值
npm install --save SparkMD52、编写UI及对应函数 3、设置分片大小
data() {return {CHUNK_SIZE: 20 * 1024 * 1024, // 分片上传大小20MB}
}4、
async customRequest(data) {var that this// 1、设置文件状态为上传中for (var ff of this.fileList) {if (ff.uid data.file.uid) {ff.status donebreak;}}let file data.file;let time new Date().getTime();// 2、求出分片数量、计算文件MD5let chunks Math.ceil(file.size / that.CHUNK_SIZE);let spark new SparkMD5.ArrayBuffer();spark.append(file);let md5 spark.end();console.log(MD5计算完毕${file.name} \nMD5${md5} \n分片${chunks} 大小:${file.size} 用时${new Date().getTime() - time} ms);spark.destroy(); //释放缓存// 3、循环读取分片并上传let currentChunk 0;// 3.1、读完第一个分片let blob loadNext(currentChunk, that.CHUNK_SIZE);for (currentChunk 1; currentChunk chunks; currentChunk) {// 上传分片var params {chunkNumber: currentChunk,totalChunks: chunks,chunkSize: that.CHUNK_SIZE,currentChunkSize: blob.size,totalSize: file.size,identifier: md5,filename: file.name}// 3.2、上传文件分片阻塞等待返回再继续执行await this.uploadFileChunk(data, blob, params);// 3.3、加载下一分片if (currentChunk chunks) {blob loadNext(currentChunk, that.CHUNK_SIZE);}}// 4、发送合并文件请求var mergeParams {totalChunks: chunks,chunkSize: that.CHUNK_SIZE,totalSize: file.size,identifier: md5,filename: file.name}await this.mergeFileChunk(data, mergeParams);// 获取文件分片方法function loadNext(currentChunk, CHUNK_SIZE) {let start currentChunk * CHUNK_SIZE;let end start CHUNK_SIZE file.size ? file.size : start CHUNK_SIZE;return file.slice(start, end);}},后端Spring Boot代码
后端代码这块是基于开源项目金鳞岂是池中物灬 / simple-uploader做了点小改动具体代码如下
文件分片上传类FileChunk
Data
public class FileChunk {/*** 主键id*/private Long id;/*** 当前块的次序第一个块是 1注意不是从 0 开始的*/private Integer chunkNumber;/*** 文件被分成块的总数。*/private Integer totalChunks;/*** 分块大小根据 totalSize 和这个值你就可以计算出总共的块数。注意最后一块的大小可能会比这个要大。*/private Integer chunkSize;/*** 当前块的大小实际大小。*/private Integer currentChunkSize;/*** 文件总大小。*/private Long totalSize;/*** 这个就是每个文件的唯一标示。*/private String identifier;/*** 文件名。*/private String filename;/*** 文件夹上传的时候文件的相对路径属性。*/private String relativePath;/*** 创建时间*/private Date createTime;/*** Spring MultipartFile*/private MultipartFile file;
}文件分片上传接口
/*** Post方法分片上传** param fileChunk 分片* return AjaxResult*/PostMapping(/upload)public BaseResponse uploadChunk(FileChunk fileChunk) {logger.info(上传分片——开始:{}, fileChunk.toString());if (fileChunk.getFile().isEmpty()) {logger.error(上传文件不存在);throw new RuntimeException(上传文件不存在);}File chunkPath new File(uploadPath File.separator temp File.separator fileChunk.getIdentifier());if (!chunkPath.exists()) {final boolean flag chunkPath.mkdirs();if (!flag) {logger.error(创建目录失败);return new BaseResponse().fail(上传失败);}}RandomAccessFile raFile null;BufferedInputStream inputStream null;try {File chuckFile new File(chunkPath, String.valueOf(fileChunk.getChunkNumber()));raFile new RandomAccessFile(chuckFile, rw);raFile.seek(raFile.length());inputStream new BufferedInputStream(fileChunk.getFile().getInputStream());byte[] buf new byte[1024];int length 0;while ((length inputStream.read(buf)) ! -1) {raFile.write(buf, 0, length);}} catch (IOException e) {throw new RuntimeException(e);} finally {if (inputStream ! null) {try {inputStream.close();} catch (IOException e) {throw new RuntimeException(e);}}if (raFile ! null) {try {raFile.close();} catch (IOException e) {throw new RuntimeException(e);}}}logger.info(上传分片——结束:{}, fileChunk.toString());return new BaseResponse().success();}合并文件分片接口
/**
* 合并文件
*
* param fileChunk 分片信息
* return AjaxResult
*/
PostMapping(/merge)
public BaseResponse merge(FileChunk fileChunk) {logger.info(合并文件——开始{}, fileChunk.toString());//分片文件临时目录File tempPath new File(uploadPath File.separator temp File.separator fileChunk.getIdentifier());// 上传的文件File realFile new File(uploadPath File.separator temp File.separator fileChunk.getFilename());// 文件追加写入FileOutputStream os;try {os new FileOutputStream(realFile, true);if (tempPath.exists()) {//获取临时目录下的所有文件File[] tempFiles tempPath.listFiles();//按名称排序Arrays.sort(tempFiles, (o1, o2) - {if (Integer.parseInt(o1.getName()) Integer.parseInt(o2.getName())) {return -1;}if (Integer.parseInt(o1.getName()) Integer.parseInt(o2.getName())) {return 0;}return 1;});//每次读取10MB大小字节读取byte[] bytes new byte[10 * 1024 * 1024];int len;for (int i 0; i tempFiles.length; i) {FileInputStream fis new FileInputStream(tempFiles[i]);while ((len fis.read(bytes)) ! -1) {os.write(bytes, 0, len);}fis.close();//删除分片tempFiles[i].delete();}os.close();// TODO验证合并文件的MD5值是否与传输过来的文件MD5值一致//删除临时目录if (tempPath.isDirectory() tempPath.exists()) {System.gc(); // 回收资源tempPath.delete();}}} catch (Exception e) {logger.error(文件合并——失败 e.getMessage());return new BaseResponse().fail(文件合并失败);}logger.info(合并文件——结束{}, fileChunk.toString());// 文件合并成功下一步上传至到阿里云String ossUrl uploadFileToOos(realFile, fileChunk.getFilename());if(StrUtil.isEmpty(ossUrl)){return new BaseResponse().fail(文件上传失败);}MapString, Object returnMap new HashMap();returnMap.put(oosUrl, ossUrl);returnMap.put(attachmentName, fileChunk.getFilename());return new BaseResponse().success(returnMap);
}上述合并文件代码其实缺少了验证文件MD5值这一步当时写代码时没发现。哈哈。
总结
至此文件分片上传的功能已经开发完毕基于上述代码其实还可以实现文件秒传、断点续传和失败重试功能。
参考
CSDN博文 vue—大文件分片上传 金鳞岂是池中物灬 / simple-uploader
