files文件分片上传+计算MD5值(sparkMD5),使用file.slice(start, end)方法

因为要跟后端交互,上传前要拿到文件的已上传信息,所以要给后端传MD5码,这个需要先计算出文件的MD5码,用 spark-md5 插件来计算

一、计算出文件的MD5值

要配合js的 FileReader 函数来使用 SparkMD5

import SparkMD5 from 'spark-md5'

// 计算MD5
getMD5(file, fileListID) {
	// 使用sparkMD5的ArrayBuffer类,读取二进制文件
    const spark = new SparkMD5.ArrayBuffer()
    const fileReader = new FileReader()
    // 异步操作,读完后的结果
    fileReader.onload = (e) => {
    	// 把文件开始传入spark
        spark.append(e.target.result)
        // spark计算出MD5后的结果
        const _md5 = spark.end()
        console.log(_md5)
        // 下面可以写一些自己需要的业务代码, 例如 fileItem.fileMD5 = _md5
    }
    // fileReader读取二进制文件
    fileReader.readAsArrayBuffer(file)
},

二、把单个文件切分成小片上传

// 文件切片大小 2MB
chunkSize: 2097152,
// 文件总切片数
chunkTotal: Math.ceil(file.size / this.chunkSize),

// 分片上传 fileItem 是单个文件的对象信息,包含该file的分片大小等信息,可以通过后端查询结果赋值
// fileItem.currentChunk 是单个文件的当前要上传的分片序号,要上传第一片就是1
// fileItem.fileSize 是单个文件的总大小
// fileItem.fileMD5 是上面计算出来的MD5值
fragmentUpload(fileItem) {
    // 批量循环发送分片上传请求
    for (let i = fileItem.currentChunk; i <= fileItem.chunkTotal; i++) {
        let start = i === 1 ? 0 : (i - 1) * this.chunkSize
        let end = start + this.chunkSize >= fileItem.fileSize ? fileItem.fileSize : start + this.chunkSize
        console.log('start:', start)
        console.log('end:', end)
        const chunkFile = fileItem.file.slice(start, end)
        const _shardSize = end === fileItem.fileSize ? end - start : this.chunkSize
        let formObj = new FormData()
        // 这些都是调用你的后端接口需要的,不需要的可以删除
        formObj.append('file', chunkFile)
        formObj.append('name', fileItem.fileName)
        formObj.append('type', fileItem.type)
        formObj.append('hashCode', fileItem.fileMD5)
        formObj.append('size', fileItem.fileSize)
        formObj.append('shardIndex', _shardIndex.toString())
        formObj.append('shardSize', _shardSize)
        formObj.append('shardTotal', fileItem.chunkTotal)
        // 调用上传接口,发送后端需要的数据
        apiUploadFileByChunk(formObj).then((res) => {
            if (res.status === '0') {
                if (fileItem.currentChunk >= fileItem.chunkTotal) {
                    fileItem.progressNumber = 100
                    fileItem.status = '2'
                    this.countNumber++
                    this.startUpload()
                } else {
                    fileItem.currentChunk++
                    fileItem.progressNumber = Math.floor(fileItem.currentChunk / fileItem.chunkTotal * 100)
                }
            } else {
                fileItem.status = '3'
            }
        }).catch(() => {
            fileItem.status = '3'
        })
        _shardIndex++
    }
},
  • 2
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Spring MVC + Vue.js 的大文件分片上传前后端MD5加密流程如下: 1. 前端通过 Vue.js 实现文件分片上传,同时计算每个分片MD5。 ```javascript <template> <div> <input type="file" @change="uploadFile"/> </div> </template> <script> import SparkMD5 from 'spark-md5' export default { name: 'FileUpload', methods: { async uploadFile(event) { const file = event.target.files[0] const chunkSize = 2097152 // 每个分片的大小为2MB const chunks = Math.ceil(file.size / chunkSize) // 文件分成的总块数 const fileReader = new FileReader() const spark = new SparkMD5.ArrayBuffer() const md5List = [] for (let i = 0; i < chunks; i++) { const start = i * chunkSize const end = start + chunkSize > file.size ? file.size : start + chunkSize const chunk = file.slice(start, end) const chunkReader = new FileReader() chunkReader.onload = e => { spark.append(e.target.result) md5List.push(spark.end()) } chunkReader.readAsArrayBuffer(chunk) } fileReader.onload = e => { const formData = new FormData() formData.append('file', file) formData.append('md5List', JSON.stringify(md5List)) // 发送文件分片MD5到后端 this.$axios.post('/uploadFile', formData) } fileReader.readAsArrayBuffer(file) } } } </script> ``` 2. 后端 Spring MVC 接收到文件分片MD5 ,对每个分片进行 MD5 计算,最后将所有分片MD5 进行合并,得到整个文件MD5 ,并与前端传过来的 MD5 进行比较,如果相同,则说明文件传输完整无误。 ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpServletRequest; import java.io.File; import java.io.IOException; import java.io.RandomAccessFile; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.util.List; @RestController public class FileUploadController { @PostMapping("/uploadFile") public void uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("md5List") String md5List, HttpServletRequest request) throws IOException, NoSuchAlgorithmException { // 将 MD5 的 JSON 字符串转换成 List List<String> md5Array = JSON.parseArray(md5List, String.class); // 计算文件MD5 MessageDigest md5Digest = MessageDigest.getInstance("MD5"); byte[] buffer = new byte[1024 * 1024]; int len; try (RandomAccessFile randomAccessFile = new RandomAccessFile(file.getOriginalFilename(), "rw")) { for (int i = 0; i < md5Array.size(); i++) { randomAccessFile.seek(i * buffer.length); len = randomAccessFile.read(buffer, 0, buffer.length); md5Digest.update(buffer, 0, len); if (!md5Array.get(i).equals(getMD5(buffer, len))) { throw new IOException("文件传输错误"); } } randomAccessFile.seek(0); while ((len = file.getInputStream().read(buffer)) != -1) { randomAccessFile.write(buffer, 0, len); } } // 保存文件 File newFile = new File("upload/" + file.getOriginalFilename()); file.transferTo(newFile); } private String getMD5(byte[] buffer, int len) throws NoSuchAlgorithmException { MessageDigest md5Digest = MessageDigest.getInstance("MD5"); md5Digest.update(buffer, 0, len); byte[] md5Bytes = md5Digest.digest(); StringBuilder stringBuilder = new StringBuilder(); for (byte md5Byte : md5Bytes) { int value = md5Byte & 0xFF; if (value < 16) { stringBuilder.append("0"); } stringBuilder.append(Integer.toHexString(value)); } return stringBuilder.toString(); } } ``` 以上代码仅供参考,实际应用中需要根据具体需求进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值