前端大文件分片上传解决方案，tornado+python+javascript

所用技术栈

• JavaScript
• python
• tornado
• madtornado

该文所用到的一切资源

• 链接

注意事项

• 本文封装的upload.js没有完全耦合后端的madtornado进行实现，但是结合madtornado接口方案可以更加便利完成分片上传任务
• 本文后端使用的python+tornado的结合，但是tornado并非原生tornado而是被封装后的madtornado，madtornado让tornado使用起来更加简单，但是使用者需要有tornado使用经验，并结合madtornado文档才能充分使用

前端实现

upload.js接口说明

• ffeach() 创建FileForeach对象工厂函数
  参数： file(必填) File对象
  参数： chunkSize(选填) 单个文件块大小，单位bytes

• new FileForeach() 文件分块函数，主要用于文件提取分割后的数据块
  参数： file(必填) File对象
  参数： chunkSize(选填) 单个文件块大小，单位bytes

• FileForeach#isOutRange() 判断文件是否超出可提取的大小

• FileForeach#nextLoad() 获取下一个文件块，返回Blob对象

• FileForeach#forEach() 遍历File对象切割的文件块
  参数： callback(必填) 回调函数，接收一个blob对象为文件数据块

注意：当数据块被遍历完毕后，将无法再产出文件块，FileForeach不保存任何数据块，为了节省空间
如果需要二次遍历，需要重新创建FileForeach对象

• hashFile() 对文件进行hash运算，该方法异步执行
  参数： file(必填) File对象
  参数： callback(选填) 接收运算完的hash结果值函数
  参数： chunkSize(选填) 单个文件块大小，单位bytes

• hashFilePromise() 对文件进行hash运算，该方法异步执行，并且会返回Promise对象
  参数： file(必填) File对象
  参数： chunkSize(选填) 单个文件块大小，单位bytes

• fetchFile() 上传文件块
  参数： address(必填) URL请求地址
  参数： md5(必填) 文件md5值
  参数： block(必填) 当前文件块的索引
  参数： data(必填) 文件块数据

upload.js前端使用案例

  let fileEl = document.getElementById("file");
    let uploadAddress = "http://127.0.0.1:8095/file/upload";
    let mergeAddress = "http://127.0.0.1:8095/file/merge";

    // 点击上传按钮时行为反应
    function upload() {
        let file = fileEl.files[0];
        if (file) {
            let fileMD5;

            // 利用时间换空间对文件首次进行md5计算校验
            hashFilePromise(file).then(md5 => {
                let fetchList = [];
                fileMD5 = md5;

                // 遍历文件切片生成fetch请求对象
                ffeach(file).forEach(function (index, data) {
                    fetchList.push(fetchFile(uploadAddress, md5, index, data));
                });

                return Promise.all(fetchList);
            }).then(function (result) {
                // 当所有数据片传输完毕后，执行的内容
                const params = new URLSearchParams();
                params.append('md5', fileMD5);
                params.append('suffix', "png");

                return fetch(mergeAddress, {
                    method: "POST",
                    body: params,
                }).then(response => {
                    if (response.ok) {
                        return response.json();
                    }
                    throw Error("请求失败");
                });
            }).then(result => {
                // 当碎片合并后返回信息
                console.log(result);
            });

            // 清空input type=file中的文件内容
            fileEl.value = null;
        } else {
            alert("请选择文件");
        }
    }

后端实现

参考madtornado文档说明

其它MVC模式开发tornado