快上网建站品牌

13518219792
  • 首页
  • 关于我们
    • 如何选择
    • 选择理由
  • 案例作品
    • 网站建设
    • 优化推广
    • 微信开发
    • 电商托管
  • 服务项目
    • 网站建设
    • 移动端/APP
    • 微信/小程序
    • 技术支持
    • 其它服务
  • 建站知识
    • 成都网站建设
    • 成都做网站
    • 成都网站设计
  • 网站售后
    • 成都网站运营
    • 成都网站维护
    • 成都网站推广
  • 客服中心
  • 全国分站

使用Node.js怎么实现一个大文件分片上传功能

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

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

看完上述内容,你们掌握使用Node.js怎么实现一个大文件分片上传功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


标题名称:使用Node.js怎么实现一个大文件分片上传功能
标题URL:http://csdahua.cn/article/ishgji.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯

  • c语言直接打印数组的函数 c语言直接打印数组的函数是什么
  • java的源代码不能看了 java源代码看不懂
  • C语言函数判断字符串长度 c语言怎样判断字符串的长度
  • 阿里云服务器如何加载浏览器 阿里云服务器可以访问谷歌吗
  • linux用不了do命令 linux命令ll用不了

行业动态

企业网站建设的重要性!

现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...

服务项目

  • 网站建设

    查看详情
  • 移动端/APP

    查看详情
  • 微信/小程序

    查看详情
  • 技术支持

    查看详情
  • 其它服务

    查看详情
  • 更多服务项目

    用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!

    获取更多

联系吧 在百度地图上找到我们

电话:13518219792

如遇占线或暂未接听请拨:136xxx98888

业务咨询 技术咨询 售后服务
网站制作
网站制作
成都网站制作
盐亭网站制作公司
广安网站制作公司
网站建设
乐山网站建设
手机网站建设
绵阳网站建设
成都网站建设公司
网站设计
成都网站设计
网站设计
成都网站设计
广安网站设计
联系我们
电话:13518219792
邮箱:631063699@qq.com
地址:成都青羊区锦天国际1002号
网址:www.csdahua.cn

微信二维码

  • 友情链接
  • 成都花箱
  • 成都工商注册
  • 绵阳电信机房
  • 成都网站维护
  • 成都路面机械设备
  • 成都网站设计
  • 重庆app软件开发
  • 微信小程序
  • zaowang.cn
  • 营销网站建设

Copyright © 2002-2023 www.csdahua.cn 快上网建站品牌 QQ:244261566 版权所有 备案号:蜀ICP备19037934号

  • 在线咨询
  • 13518219792
  • 微信二维码

  • 移动版官网