基于Node.js的大文件分片上传示例资源-CSDN文库

192 浏览量 2021-01-20 07:24:39 上传评论收藏 65KB PDF 举报

资源推荐

资源详情

资源评论

基于基于Node.js的大文件分片上传示例的大文件分片上传示例

我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要

对文件进行分片上传的操作。同时如果文件过大，在网络不佳的情况下，如何做到断点续传？也是需要记录当前上传文件，然

后在下一次进行上传请求的时候去做判断。

先上代码：代码仓库地址

前端前端

1. index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>文件上传</title>

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script src="./spark-md5.min.js"></script>

<script>

$(document).ready(() => {

const chunkSize = 1 * 1024 * 1024; // 每个chunk的大小，设置为1兆

// 使用Blob.slice方法来对文件进行分割。

// 同时该方法在不同的浏览器使用方式不同。

const blobSlice =

File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

const hashFile = (file) => {

return new Promise((resolve, reject) => {

const chunks = Math.ceil(file.size / chunkSize);

let currentChunk = 0;

const spark = new SparkMD5.ArrayBuffer();

const fileReader = new FileReader();

function loadNext() {

const start = currentChunk * chunkSize;

const end = start + chunkSize >= file.size ? file.size : start + chunkSize;

fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));

}

fileReader.onload = e => {

spark.append(e.target.result); // Append array buffer

currentChunk += 1;

if (currentChunk < chunks) {

loadNext();

} else {

console.log('finished loading');

const result = spark.end();

// 如果单纯的使用result 作为hash值的时候, 如果文件内容相同，而名称不同的时候

// 想保留两个文件无法保留。所以把文件名称加上。

const sparkMd5 = new SparkMD5();

sparkMd5.append(result);

sparkMd5.append(file.name);

const hexHash = sparkMd5.end();

resolve(hexHash);

}

};

fileReader.onerror = () => {

console.warn('文件读取失败！');

};

loadNext();

}).catch(err => {

console.log(err);

});

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38731199

粉丝: 7
资源: 928

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip