写一下springmvc + vue的大文件分片上传代码。要求:1.前端加入MD5;2.用elementui

时间: 2024-03-05 08:51:44 浏览: 30
好的,以下是一个示例代码,使用SpringMVC和Vue实现大文件分片上传,同时前端加入MD5校验,使用ElementUI实现进度条显示。 前端代码: ```vue <template> <div> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="onSuccess" :file-list="fileList"> <el-button type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传不超过 200MB 的文件</div> </el-upload> <el-progress :percentage="percentage" :stroke-width="30" :text-inside="true"></el-progress> </div> </template> <script> import SparkMD5 from 'spark-md5' export default { data() { return { fileList: [], percentage: 0, } }, methods: { beforeUpload(file) { return new Promise((resolve, reject) => { const reader = new FileReader() const chunkSize = 2 * 1024 * 1024 // 分片大小为2MB const chunks = Math.ceil(file.size / chunkSize) const spark = new SparkMD5.ArrayBuffer() let currentChunk = 0 reader.onload = e => { spark.append(e.target.result) currentChunk++ if (currentChunk < chunks) { loadNext() } else { file.md5 = spark.end() resolve(file) } } reader.onerror = () => { reject('读取文件出错') } function loadNext() { const start = currentChunk * chunkSize const end = Math.min(start + chunkSize, file.size) reader.readAsArrayBuffer(file.slice(start, end)) } loadNext() }) }, onProgress(e) { this.percentage = e.percent }, onSuccess(response, file) { this.percentage = 0 this.fileList = [] this.$message.success('上传成功') }, }, } </script> ``` 在这个示例代码中,我们使用了SparkMD5库来计算文件的MD5,同时在`beforeUpload`方法中,将文件分成多个2MB的分片进行上传,以实现大文件分片上传和MD5校验。在上传过程中,我们使用了ElementUI的进度条组件来显示上传进度。 后端代码: ```java @Controller public class UploadController { private static final String UPLOAD_DIR = "/tmp/uploads/"; private static final int CHUNK_SIZE = 2 * 1024 * 1024; @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody public ResponseEntity<?> upload(@RequestParam("file") MultipartFile file, @RequestParam("md5") String md5, @RequestParam(value = "chunk", required = false, defaultValue = "0") int chunk, @RequestParam(value = "chunks", required = false, defaultValue = "1") int chunks) throws IOException { String fileName = file.getOriginalFilename(); String filePath = UPLOAD_DIR + fileName; if (chunk == 0) { // 如果是第一个分片,检查文件是否存在,如果存在则直接返回 File f = new File(filePath); if (f.exists()) { return ResponseEntity.status(HttpStatus.OK).build(); } } else { // 如果不是第一个分片,检查文件是否存在,如果不存在则返回错误 File f = new File(filePath); if (!f.exists()) { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("文件不存在"); } } if (chunk == 0) { // 如果是第一个分片,创建文件 File f = new File(filePath); if (!f.getParentFile().exists()) { f.getParentFile().mkdirs(); } f.createNewFile(); } // 写入分片数据 RandomAccessFile raf = new RandomAccessFile(filePath, "rw"); raf.seek(chunk * CHUNK_SIZE); raf.write(file.getBytes()); raf.close(); if (chunk == chunks - 1) { // 如果是最后一个分片,检查文件MD5值是否正确,如果正确则合并文件 String fileMd5 = getFileMd5(filePath); if (!fileMd5.equals(md5)) { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("文件MD5值不正确"); } mergeFileChunks(filePath, chunks); } return ResponseEntity.status(HttpStatus.OK).build(); } private String getFileMd5(String filePath) throws IOException { InputStream fis = new FileInputStream(filePath); byte[] buffer = new byte[1024]; int numRead; MessageDigest md5; try { md5 = MessageDigest.getInstance("MD5"); } catch (NoSuchAlgorithmException e) { return null; } do { numRead = fis.read(buffer); if (numRead > 0) { md5.update(buffer, 0, numRead); } } while (numRead != -1); fis.close(); byte[] md5Bytes = md5.digest(); StringBuilder sb = new StringBuilder(); for (byte b : md5Bytes) { sb.append(Integer.toString((b & 0xff) + 0x100, 16).substring(1)); } return sb.toString(); } private void mergeFileChunks(String filePath, int chunks) throws IOException { File f = new File(filePath); FileOutputStream fos = new FileOutputStream(f, true); byte[] buffer = new byte[1024]; for (int i = 0; i < chunks; i++) { String chunkFilePath = filePath + "." + i; File chunk = new File(chunkFilePath); FileInputStream fis = new FileInputStream(chunk); int numRead; while ((numRead = fis.read(buffer)) > 0) { fos.write(buffer, 0, numRead); } fis.close(); chunk.delete(); } fos.close(); } } ``` 在后端代码中,我们使用了`RandomAccessFile`来实现文件的分片写入和合并,同时在文件合并前使用了`getFileMd5`方法来检查文件的MD5值是否正确。 最后,我们还需要在SpringMVC的配置文件中添加以下配置,以支持大文件上传: ```xml <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="209715200" /> <property name="maxInMemorySize" value="4096" /> </bean> ```

相关推荐

最新推荐

recommend-type

Spring+SpringMVC+Hibernate框架集成详解

此文档只说明简单的框架集成,各个框架的高级特性未涉及,此文档适合有框架使用基础的开发人员查看,新手可能需要参考其他资料。
recommend-type

SpringMVC后端返回数据到前端代码示例

主要介绍了SpringMVC后端返回数据到前端代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
recommend-type

详解SpringMVC使用MultipartFile实现文件的上传

本篇文章主要介绍了SpringMVC使用MultipartFile实现文件的上传,本地的文件上传到资源服务器上,比较好的办法就是通过ftp上传。这里是结合SpringMVC+ftp的形式上传的,有兴趣的可以了解一下。
recommend-type

SpringMVC实现前端后台交互传递数据

本篇文章主要介绍了SpringMVC实现前端后台传递数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
recommend-type

IDEA实现 springmvc的简单注册登录功能的示例代码

主要介绍了IDEA实现 springmvc的简单注册登录功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

用 Python 画一个可以动的爱心

好的,我可以帮助您使用Python来绘制一个动态的爱心。您可以使用turtle库来实现。以下是实现代码: ```python import turtle import math # 设置画布和画笔 canvas = turtle.Screen() canvas.bgcolor("black") pencil = turtle.Turtle() pencil.speed(0) pencil.color("red", "pink") pencil.pensize(3) # 定义爱心函数 def draw_love(heart_size, x_offset=0, y_offset=0):
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。