前端 ：

<html>

<head>

    <title>分片上传文件</title>

</head>

<body>

    <div class="hei-bg" style="display:block;">

        <div class="user-info" style="display:block;">

            <div class="tc">请上传大文件</div>

            <div class="user-pic picw320">

                <input id="uppic" type="file">

            </div>

            <div id="jd" class="jdb">进度</div>

            <div>

                <input type="button" value="确定" id="userbtn" class="bg-main tc userbtn">

            </div>

        </div>

    </div>

</body>

<script src="/javascripts/jquery.min.js"></script>

<script>

    $(function () {

        $('#userbtn').on('click', async function () {

            var d1 = new Date();

            let file = $("#uppic")[0].files[0], //上传文件主体

                name = file.name, //文件名

                size = file.size, //总大小

                succeed = 0, //当前上传数

                shardSize = 1 * 1024 * 1024, //以1MB为一个分片

                shardCount = Math.ceil(size / shardSize); //总片数

            let attr = [];

            try {

                for (let item = 0; item < shardCount; ++item) {

                    await fn(item); //同步

                    // attr.push(fn(item)); //异步

                }

                await Promise.all(attr); //异步

                $('.jdb').append(' 上传成功');

                var d2 = new Date();

                console.log(parseInt(d2 - d1) / 1000);

            } catch (err) {

                $('.jdb').html(err);

                console.log(err);

            }

            function fn(item) {

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

                    var i = item;

                    var start = i * shardSize, //当前分片开始下标

                        end = Math.min(size, start + shardSize); //结束下标

                    //构造一个表单，FormData是HTML5新增的

                    var form = new FormData();

                    form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分

                    form.append("name", name); //文件名字

                    form.append("total", shardCount); //总片数

                    form.append("index", i + 1); //当前片数

                    //Ajax提交

                    $.ajax({

                        url: "/sliceUpload",

                        type: "POST",

                        data: form,

                        timeout: 120 * 1000,

                        async: false, //同步

                        processData: false, //很重要，告诉jquery不要对form进行处理

                        contentType: false, //很重要，指定为false才能形成正确的Content-Type

                        success: function (data) {

                            ++succeed;

                            if (typeof (data) == 'string') {

                                try {

                                    data = JSON.parse(data);

                                    console.log(data.msg);

                                } catch (e) {

                                    console.log(data);

                                }

                            }

                            //生成当前进度百分比

                            var jd = `${Math.round(succeed / shardCount * 100)}%`;

                            $('.jdb').html(jd);

                            /*如果是线上，去掉定时，直接callback()，

                            这样写是为方便，本地测试看到进度条变化

                            因为本地做上传测试是秒传，没有时间等待*/

                            setTimeout(resolve, 50);

                        }

                    });

                })

            }

        });

    });

</script>

</html>

服务器端：

async function sliceUpload(req, res) {

    var fs = require('fs');

    var multiparty = require('multiparty'); //文件上传模块

    var form = new multiparty.Form(); //新建表单

    //设置编辑

    form.encoding = 'utf-8';

    //设置文件存储路径

    form.uploadDir = "temp/"; // "Uploads/";

    //设置单文件大小限制

    // form.maxFilesSize = 200 * 1024 * 1024;

    /*form.parse表单解析函数，fields是生成数组用获传过参数，files是bolb文件名称和路径*/

    try {

        let [fields, files] = await new Promise((resolve, reject) => {

            form.parse(req, (err, fields, files) => {

                if (err) reject('test err');

                resolve([fields, files]);

            })

        })

        files = files['data'][0]; //获取bolb文件

        var index = fields['index'][0]; //当前片数

        var total = fields['total'][0]; //总片数

        var name = fields['name'][0]; //文件名称

        var url = 'temp/' + name + index; //临时bolb文件新名字

        fs.renameSync(files.path, url); //修改临时文件名字

        var pathname = 'Uploads/' + name; //上传文件存放位置和名称

        if (index == total) { //当最后一个分片上传成功，进行合并

            // 检查文件是存在，如果存在，重新设置名称

            let NonExist = await new Promise((resolve, reject) => {

                fs.access(pathname, fs.F_OK, (err) => {

                    resolve(err);

                });

            })

            if (!NonExist) {

                var myDate = Date.now();

                pathname = 'Uploads/' + myDate + name;

            }

            logs.info('上传文件：' + pathname);

            /*进行合并文件，先创建可写流，再把所有BOLB文件读出来，

                流入可写流，生成文件

                fs.createWriteStream创建可写流

                aname是存放所有生成bolb文件路径数组:

                ['Uploads/3G.rar1','Uploads/3G.rar2',...]

            */

            var writeStream = fs.createWriteStream(pathname);

            var aname = [];

            for (let i = 1; i <= total; i++) {

                let url = 'temp/' + name + i;

                let data = await new Promise(function (resolve, reject) {

                    fs.readFile(url, function (error, data) {

                        if (error) reject(error);

                        resolve(data);

                    });

                });

                //把数据写入流里

                writeStream.write(data);

                //删除生成临时bolb文件

                fs.unlink(url, () => {});

            }

            writeStream.end();

            //返回给客服端，上传成功

            var data = JSON.stringify({

                'code': 0,

                'msg': '上传成功'

            });

            res.send(data); //返回数据

        } else { //还没有上传文件，请继续上传

            var data = JSON.stringify({

                'code': 1,

                'msg': '继续上传'

            });

            res.send(data); //返回数据

        }

    } catch (e) {

        logs.info(e);

        res.send(e); //返回数据

    }

}

node.js分片上传文件的更多相关文章

  1. Node.js：上传文件，服务端如何获取文件上传进度

    内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件 ...

  2. Node.js——异步上传文件

    前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...

  3. 科普文：Node.js 如何上传文件到后端服务【转】

    原文链接 https://www.yuque.com/egg/nodejs/httpclient-upload 背景 互联网时代,无数服务是基于 HTTP 协议进行通信的. 除了常见的 前端浏览器 - ...

  4. js能否上传文件夹

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  5. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  6. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  7. django实现分片上传文件

    目标:利用django实现上传文件功能 1,先设置路由系统 urls.py from django.conf.urls import url,include from django.contrib i ...

  8. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  9. js获取上传文件内容

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

随机推荐

  1. Navicat premium连不上Oracle的问题解决

    1.ORA-28547: 这是因为oci.dll版本不对.Navicat本地的OCI版本与Oracle服务器服务器不符造成的. 或者 打开Navicat premium客户端:Tool->Opt ...

  2. Kubernetes 集群部署（2） -- Etcd 集群

    Kubenetes 集群部署规划: 192.168.137.81  Master 192.168.137.82  Node 192.168.137.83  Node 以下在 Master 节点操作. ...

  3. 查看linux操作系统的版本等信息

    1.查看操作系统是32位还是64位的命令: (1)getconf LONG_BIT (2)uname -a (3)uname -m (4)arch (5)file /sbin/init 2.查看操作系 ...

  4. SDUT OJ 数据结构实验之图论六：村村通公路（最小生成树）

    数据结构实验之图论六:村村通公路 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  5. APUE第八章-进程控制

    一.进程标识 二.函数fork 1.写时复制,copy-on-write 2.文件共享,父进程等待子进程完成,子进程结束后,它对任一共享描述符的读写操作的文件偏移量已做相应的更新,同时操作时,可以考虑 ...

  6. sharding-jdbc springboot配置

    SPRING BOOT配置 注意事项 行表达式标识符可以使用${...}或$->{...},但前者与Spring本身的属性文件占位符冲突,因此在Spring环境中使用行表达式标识符建议使用$-& ...

  7. DHCP协议及基本实现原理

    DHCP(Dynamic Host Configuration Protocol):动态主机配置协议. DHCP的优缺点 DHCP服务优点:网络管理员可以验证IP地址和其它配置参数,而不用去检查每个主 ...

  8. Luogu P1052 过河 DP

    复习复习DP...都忘了QAQ... 好了这道题我其实是看题解才会的... 方程 f[i]=min(f[i-j]+v[i]) v[i]表示i是不是石头 s<=j<=t 路径压缩引用一下证明 ...

  9. Qt随笔 - QSettings

    QSettings类提供了持久的跨平台应用程序设置. 嗯,一句话概括QSettings-- 创建 来看一下原型: QSettings::QSettings(const QString &org ...

  10. java的Spring学习2- junit

    1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...