node.js分片上傳文件 -开发者知识库

node.js分片上傳文件 -开发者知识库,第1张

前端 :

<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>

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复