首页 > 编程语言 >基于Node.js的大文件分片上传

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

时间:2023-10-09 09:55:32浏览次数:35  
标签:Node 文件 fs hash js file 分片 const 上传

我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况。所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作。同时如果文件过大,在网络不佳的情况下,如何做到断点续传?也是需要记录当前上传文件,然后在下一次进行上传请求的时候去做判断。

前端

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);
                });
            }

            const submitBtn = $('#submitBtn');
            submitBtn.on('click', async () => {
                const fileDom = $('#file')[0];
                // 获取到的files为一个File对象数组,如果允许多选的时候,文件为多个
                const files = fileDom.files;
                const file = files[0];
                if (!file) {
                    alert('没有获取文件');
                    return;
                }
                const blockCount = Math.ceil(file.size / chunkSize); // 分片总数
                const axiosPromiseArray = []; // axiosPromise数组
                const hash = await hashFile(file); //文件 hash 
                // 获取文件hash之后,如果需要做断点续传,可以根据hash值去后台进行校验。
                // 看看是否已经上传过该文件,并且是否已经传送完成以及已经上传的切片。
                console.log(hash);
                
                for (let i = 0; i < blockCount; i++) {
                    const start = i * chunkSize;
                    const end = Math.min(file.size, start + chunkSize);
                    // 构建表单
                    const form = new FormData();
                    form.append('file', blobSlice.call(file, start, end));
                    form.append('name', file.name);
                    form.append('total', blockCount);
                    form.append('index', i);
                    form.append('size', file.size);
                    form.append('hash', hash);
                    // ajax提交 分片,此时 content-type 为 multipart/form-data
                    const axiosOptions = {
                        onUploadProgress: e => {
                            // 处理上传的进度
                            console.log(blockCount, i, e, file);
                        },
                    };
                    // 加入到 Promise 数组中
                    axiosPromiseArray.push(axios.post('/file/upload', form, axiosOptions));
                }
                // 所有分片上传后,请求合并分片文件
                await axios.all(axiosPromiseArray).then(() => {
                    // 合并chunks
                    const data = {
                        size: file.size,
                        name: file.name,
                        total: blockCount,
                        hash
                    };
                    axios
                        .post('/file/merge_chunks', data)
                        .then(res => {
                            console.log('上传成功');
                            console.log(res.data, file);
                            alert('上传成功');
                        })
                        .catch(err => {
                            console.log(err);
                        });
                });
            });

        })
        
        window.onload = () => {
        }

    </script>

</head>
<body>
    <h1>大文件上传测试</h1>
    <section>
        <h3>自定义上传文件</h3>
        <input id="file" type="file" name="avatar"/>
        <div>
            <input id="submitBtn" type="button" value="提交">
        </div>
    </section>

</body>
</html>

2. 依赖的文件

axios.js
jquery
spark-md5.js

后端

1. app.js

const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const multer = require('koa-multer');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs-extra');
const koaBody = require('koa-body');
const { mkdirsSync } = require('./utils/dir');
const uploadPath = path.join(__dirname, 'uploads');
const uploadTempPath = path.join(uploadPath, 'temp');
const upload = multer({ dest: uploadTempPath });
const router = new Router();
app.use(koaBody());
/**
 * single(fieldname)
 * Accept a single file with the name fieldname. The single file will be stored in req.file.
 */
router.post('/file/upload', upload.single('file'), async (ctx, next) => {
    console.log('file upload...')
    // 根据文件hash创建文件夹,把默认上传的文件移动当前hash文件夹下。方便后续文件合并。
    const {
        name,
        total,
        index,
        size,
        hash
    } = ctx.req.body;

    const chunksPath = path.join(uploadPath, hash, '/');
    if(!fs.existsSync(chunksPath)) mkdirsSync(chunksPath);
    fs.renameSync(ctx.req.file.path, chunksPath + hash + '-' + index);
    ctx.status = 200;
    ctx.res.end('Success');
})

router.post('/file/merge_chunks', async (ctx, next) => {
    const {
        size, name, total, hash
    } = ctx.request.body;
    // 根据hash值,获取分片文件。
    // 创建存储文件
    // 合并
    const chunksPath = path.join(uploadPath, hash, '/');
    const filePath = path.join(uploadPath, name);
    // 读取所有的chunks 文件名存放在数组中
    const chunks = fs.readdirSync(chunksPath);
    // 创建存储文件
    fs.writeFileSync(filePath, ''); 
    if(chunks.length !== total || chunks.length === 0) {
        ctx.status = 200;
        ctx.res.end('切片文件数量不符合');
        return;
    }
    for (let i = 0; i < total; i++) {
        // 追加写入到文件中
        fs.appendFileSync(filePath, fs.readFileSync(chunksPath + hash + '-' +i));
        // 删除本次使用的chunk
        fs.unlinkSync(chunksPath + hash + '-' +i);
    }
    fs.rmdirSync(chunksPath);
    // 文件合并成功,可以把文件信息进行入库。
    ctx.status = 200;
    ctx.res.end('合并成功');
})
app.use(router.routes());
app.use(router.allowedMethods());
app.use(serve(__dirname + '/static'));
app.listen(9000);

2. utils/dir.js

const path = require('path');
const fs = require('fs-extra');
const mkdirsSync = (dirname) => {
    if(fs.existsSync(dirname)) {
        return true;
    } else {
        if (mkdirsSync(path.dirname(dirname))) {
            fs.mkdirSync(dirname);
            return true;
        }
    }
}
module.exports = {
    mkdirsSync
};

操作步骤说明

服务端的搭建

我们以下的操作都是保证在已经安装node以及npm的前提下进行。node的安装以及使用可以参考官方网站
  1. 新建项目文件夹file-upload
  2. 使用npm初始化一个项目:cd file-upload && npm init
  3. 安装相关依赖

       npm i koa
       npm i koa-router --save    // Koa路由
       npm i koa-multer  --save   // 文件上传处理模块
       npm i koa-static --save    // Koa静态资源处理模块
       npm i fs-extra --save      // 文件处理
       npm i koa-body --save      // 请求参数解析
      
  4. 创建项目结构

       file-upload
           - static
               - index.html
               - spark-md5.min.js
           - uploads
               - temp
           - utils
               - dir.js
           - app.js
    
  5. 复制相应的代码到指定位置即可
  6. 项目启动:node app.js (可以使用 nodemon 来对服务进行管理)
  7. 访问:http://localhost:9000/index.html

 

参考文章:http://blog.ncmem.com/wordpress/2023/10/09/%e5%9f%ba%e4%ba%8enode-js%e7%9a%84%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论

 

标签:Node,文件,fs,hash,js,file,分片,const,上传
From: https://www.cnblogs.com/songsu/p/17750802.html

相关文章

  • 【webapp】JSP 内置对象
    request:表示客户端的请求信息,可以用于获取请求参数、请求头、请求方法等。response:代表服务器对客户端的响应,可以用于设置响应头、响应内容等。out:是一个输出流对象,可以用于向客户端输出内容。session:表示用户的会话,可以用于在不同的页面之间共享数据。application:代表整个应......
  • 【webapp】JSP页面间跳转和包含
    在JSP中,有两种常见的页面间跳转和包含方式:转发(forward)和包含(include)。转发(Forwarding):通过转发,一个页面可以将请求转发给另一个页面进行处理,然后由该页面生成响应。转发是在服务器端完成的,客户端并不知道实际的页面地址。使用转发的语法是 request.getRequestDispatcher("......
  • 【webapp】JSP 标签的分类(动作标签、指令标签、表达式标签)
    SP(JavaServerPages)标签是用于在JSP页面中插入特定功能和逻辑的标记。根据其功能和用途,JSP标签可以分为以下三类:动作标签(ActionTags):动作标签用于执行特定的操作或调用服务器端的功能。它们通常以<jsp:开头,并以>结束。动作标签可以使用内置的JSP动作或自定义的标......
  • 【webapp】JSTL(JSP Standard Tag Library)
    JSTL(JSPStandardTagLibrary)是一个标准的JSP标签库,提供了一组用于处理常见任务的标签和函数,以简化JSP页面的开发。以下是关于JSTL的使用方法:引入JSTL标签库:在使用JSTL之前,首先需要在JSP页面中引入JSTL标签库。可以通过<%@taglib%>指令来完成引入。JSTL标......
  • 【wabapp】jsp输出内容
    静态HTML内容:JSP页面中的所有静态HTML内容,例如标签、文本、图像等,会直接显示在生成的HTML页面中。这些内容不受JSP代码的影响,会原样输出。jspCopy<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>StaticHTMLContent</title></head><......
  • Vue工程中 main.js 的作用、npm run serve的执行流程
    1.内容:importVuefrom'vue'   //导入Vue核心包importAppfrom'./App.vue'  //导入App.vue根组件Vue.config.productionTip=false  //提示当前处于什么环境(生产环境/开发环境),fasle是什么提示都没有,改为true才提示,但通常写falsenewVue({   ......
  • node-oracledb nodejs 包支持thin 模式了
    node-oracledb从v6.0.0版本来时支持thin模式了,是基于纯javascript开发的驱动,我们终于可以不用依赖比较笨重的oracleclient了属于一个很大的进度,同时python版本也是支持thin模式了,我以前也简单介绍过参考资料https://github.com/oracle/node-oracledb/releaseshttps://me......
  • 2023-10-08 js计算指定时间1天后的剩余时间
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="w......
  • JavaScript实现大文件分片上传处理
    很多时候我们在处理文件上传时,如视频文件,小则几十M,大则1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1、文件过大,超出服务端的请求大小限制;2、请求时间过长,请求超时;3、传输中断,必须重新上传导致前功尽弃这些问题很影响用户的体验感,所以下面介绍一种基于原生JavaScript进......
  • redis-cluster nodes命令信息说明
     集群定义1.1每个字段的含义如下:1.id:节点ID,一个40字节的随机字符串,节点创建时生成,且不会变化(除非使用CLUSTERRESETHARD命令)。2.ip:port:客户端访问的地址。3.flags:逗号分隔的标记位,可能值有:myself,master,slave,fail?,fail,handshake,noaddr,noflags......