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

Genng 发布于2019-08-30 11:13 / 951人阅读

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。后续延伸断点续传多文件多批次上传

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

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

先上代码：代码仓库地址

前端 1. index.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的安装以及使用可以参考官方网站。

新建项目文件夹file-upload

使用npm初始化一个项目：cd file-upload && npm init

安装相关依赖

   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      // 请求参数解析

创建项目结构

   file-upload
       - static
           - index.html
           - spark-md5.min.js
       - uploads
           - temp
       - utils
           - dir.js
       - app.js

复制相应的代码到指定位置即可

项目启动：node app.js (可以使用 nodemon 来对服务进行管理)

访问：http://localhost:9000/index.html

其中细节部分代码里有相应的注释说明，浏览代码就一目了然。
后续延伸：断点续传、多文件多批次上传

云服务器 GPU云服务器基于hadoop的大数据分片上传分片上传基于数据分析的大数据基于云计算的大数据挖掘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114848.html

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

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。后续延伸断点续传多文件多批次上传基于Node.js的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如...

lcodecorex 2019-08-02 15:19 评论0 收藏0
基于Node.js的大文件分片上传

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。后续延伸断点续传多文件多批次上传基于Node.js的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如...

BigTomato 2019-08-23 18:12 评论0 收藏0
基于Node.js的大文件分片上传

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。方便后续文件合并。基于Node.js的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如果文件过大，在...

W4n9Hu1 2019-08-02 15:36 评论0 收藏0
基于Node.js的大文件分片上传

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。方便后续文件合并。基于Node.js的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如果文件过大，在...

dadong 2019-08-26 10:16 评论0 收藏0
基于Node.js的大文件分片上传

摘要：基于的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。所以把文件名称加上。方便后续文件合并。基于Node.js的大文件分片上传我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如果文件过大，在...

tianlai 2019-08-30 15:44 评论0 收藏0