资讯专栏INFORMATION COLUMN

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

W4n9Hu1 / 3261人阅读

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

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

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

先上代码:代码仓库地址

前端 1. index.html
  1. <span class="javascript">文件上传</span>
  2. 大文件上传测试

  3. 自定义上传文件

2. 依赖的文件

axios.js
jquery
spark-md5.js

后端 1. app.js

</>code

  1. const Koa = require("koa");
  2. const app = new Koa();
  3. const Router = require("koa-router");
  4. const multer = require("koa-multer");
  5. const serve = require("koa-static");
  6. const path = require("path");
  7. const fs = require("fs-extra");
  8. const koaBody = require("koa-body");
  9. const { mkdirsSync } = require("./utils/dir");
  10. const uploadPath = path.join(__dirname, "uploads");
  11. const uploadTempPath = path.join(uploadPath, "temp");
  12. const upload = multer({ dest: uploadTempPath });
  13. const router = new Router();
  14. app.use(koaBody());
  15. /**
  16. * single(fieldname)
  17. * Accept a single file with the name fieldname. The single file will be stored in req.file.
  18. */
  19. router.post("/file/upload", upload.single("file"), async (ctx, next) => {
  20. console.log("file upload...")
  21. // 根据文件hash创建文件夹,把默认上传的文件移动当前hash文件夹下。方便后续文件合并。
  22. const {
  23. name,
  24. total,
  25. index,
  26. size,
  27. hash
  28. } = ctx.req.body;
  29. const chunksPath = path.join(uploadPath, hash, "/");
  30. if(!fs.existsSync(chunksPath)) mkdirsSync(chunksPath);
  31. fs.renameSync(ctx.req.file.path, chunksPath + hash + "-" + index);
  32. ctx.status = 200;
  33. ctx.res.end("Success");
  34. })
  35. router.post("/file/merge_chunks", async (ctx, next) => {
  36. const {
  37. size, name, total, hash
  38. } = ctx.request.body;
  39. // 根据hash值,获取分片文件。
  40. // 创建存储文件
  41. // 合并
  42. const chunksPath = path.join(uploadPath, hash, "/");
  43. const filePath = path.join(uploadPath, name);
  44. // 读取所有的chunks 文件名存放在数组中
  45. const chunks = fs.readdirSync(chunksPath);
  46. // 创建存储文件
  47. fs.writeFileSync(filePath, "");
  48. if(chunks.length !== total || chunks.length === 0) {
  49. ctx.status = 200;
  50. ctx.res.end("切片文件数量不符合");
  51. return;
  52. }
  53. for (let i = 0; i < total; i++) {
  54. // 追加写入到文件中
  55. fs.appendFileSync(filePath, fs.readFileSync(chunksPath + hash + "-" +i));
  56. // 删除本次使用的chunk
  57. fs.unlinkSync(chunksPath + hash + "-" +i);
  58. }
  59. fs.rmdirSync(chunksPath);
  60. // 文件合并成功,可以把文件信息进行入库。
  61. ctx.status = 200;
  62. ctx.res.end("合并成功");
  63. })
  64. app.use(router.routes());
  65. app.use(router.allowedMethods());
  66. app.use(serve(__dirname + "/static"));
  67. app.listen(9000);
2. utils/dir.js

</>code

  1. const path = require("path");
  2. const fs = require("fs-extra");
  3. const mkdirsSync = (dirname) => {
  4. if(fs.existsSync(dirname)) {
  5. return true;
  6. } else {
  7. if (mkdirsSync(path.dirname(dirname))) {
  8. fs.mkdirSync(dirname);
  9. return true;
  10. }
  11. }
  12. }
  13. module.exports = {
  14. mkdirsSync
  15. };
操作步骤说明 服务端的搭建

</>code

  1. 我们以下的操作都是保证在已经安装node以及npm的前提下进行。node的安装以及使用可以参考官方网站。

新建项目文件夹file-upload

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

安装相关依赖

</>code

  1. npm i koa
  2. npm i koa-router --save // Koa路由
  3. npm i koa-multer --save // 文件上传处理模块
  4. npm i koa-static --save // Koa静态资源处理模块
  5. npm i fs-extra --save // 文件处理
  6. npm i koa-body --save // 请求参数解析

创建项目结构

</>code

  1. file-upload
  2. - static
  3. - index.html
  4. - spark-md5.min.js
  5. - uploads
  6. - temp
  7. - utils
  8. - dir.js
  9. - app.js

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

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

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

</>code

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

</>code

  1. 作者:易企秀——饭等米

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

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

相关文章

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

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

    Genng 评论0 收藏0
  • 基于Node.js的大文件分片上传

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

    lcodecorex 评论0 收藏0
  • 基于Node.js的大文件分片上传

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

    BigTomato 评论0 收藏0
  • 基于Node.js的大文件分片上传

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

    dadong 评论0 收藏0
  • 基于Node.js的大文件分片上传

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

    tianlai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<