文件上传之剪切板上传及大文件分片上传和断点续传

前言

文件上传是开发中经常遇到的，市面上也有很多插件。直接封装了上传的方法，使用起来很简单。使用vue和react技术栈的同学，都使用了element和antd的上传，因此，拖拽上传和一般上传，今天这篇文章不做解释。今天主要总结一下剪切板上传和大文件分片上传及断点续传的内容。

一、剪切板上传

剪切板上传就是复制电脑上的图片或者文件，或者网络中的在线图片，然后粘贴到指定位置上传的方式。

关于剪切板，我之前文章有介绍过： https://www.haorooms.com/post/js_focus_position_copy 假如对光标位置和剪切板复制不清楚的同学，可以看这篇文章。

前台可以这么写：

var haoroomsbox = document.getElementById('haoronms-edit');
    haoroomsbox.addEventListener('paste',function (event) {
        var data = (event.clipboardData || window.clipboardData);
        var items = data.items;
        var fileList = [];//存储文件数据
        if (items && items.length) {
            // 检索剪切板items
            for (var i = 0; i < items.length; i++) {
                fileList.push(items[i].getAsFile());
            }
        }
        window.willUploadFileList = fileList;
        event.preventDefault();
        submitUpload();
    }); 

    function submitUpload() {
        var fileList = window.willUploadFileList||[];
        if(!fileList.length){
            console.log('当前无粘贴文件');
            return;
        }
        var haoroomsformData = new FormData();   //构造FormData对象
        for(var i =0;i<fileList.length;i++){
            haoroomsformData.append('filename', fileList[i]);//支持多文件上传
        }
       // http请求，当然你也可以用第三方的axios等
        var xhr = new XMLHttpRequest();   //创建对象
        xhr.open('POST', 'http://haorooms.com:8100/fileupload', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                var obj = JSON.parse(xhr.responseText);   //返回值
                if(obj.fileUrl.length){
                    var img = document.createElement('img');
                    img.src= obj.fileUrl[0];
                    img.style.width='100px';//这里可以自定义图片宽度，也可以不用写
                    insertNodeToEditor(box,img);
                   // alert('上传成功');
                }
            }
        }

        //注意 send 一定要写在最下面，否则 onprogress 只会执行最后一次 也就是100%的时候
        xhr.send(haoroomsformData);//发送时  Content-Type默认就是: multipart/form-data; 
    }
    //光标处插入 dom 节点
    function  insertNodeToEditor(editor,ele) {
        //插入dom 节点
        var range;//记录光标位置对象
        var node = window.getSelection().anchorNode;
        // 这里判断是做是否有光标判断，因为弹出框默认是没有的
        if (node != null) {
            range = window.getSelection().getRangeAt(0);// 获取光标起始位置
            range.insertNode(ele);// 在光标位置插入该对象
        } else {
            editor.append(ele);
        }
    }

后端以Koa为例

var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 支持文件上传
}));
app.use(koaStatic(
    path.resolve(__dirname, '../static')
));
//允许跨域
app.use(async (ctx, next) => {
    ctx.set('Access-Control-Allow-Origin', ctx.headers.origin);
    ctx.set("Access-Control-Max-Age", 864000);
    // 设置所允许的HTTP请求方法
    ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
    // 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段.
    ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
    await next();
  })
//二次处理文件，修改名称
app.use((ctx) => {
    console.log(ctx.request.files);
    var files = ctx.request.files.f1;//得到上传文件的数组
    var result=[];
    console.log(files);
    if(!Array.isArray(files)){//单文件上传容错
        files=[files];
    }
    files && files.forEach(item=>{
        var path = item.path.replace(/\\/g, '/');
        var fname = item.name;//原文件名称
        var nextPath = path + fname;
        if (item.size > 0 && path) {
            //得到扩展名
            var extArr = fname.split('.');
            var ext = extArr[extArr.length - 1];
            var nextPath = path + '.' + ext;
            //重命名文件
            fs.renameSync(path, nextPath);

            result.push(uploadHost+ nextPath.slice(nextPath.lastIndexOf('/') + 1));
        }
    });
    ctx.body = `{
        "fileUrl":${JSON.stringify(result)}
    }`;
})

二、大文件上传

大文件上传其实就是将一个大文件拆分成多个小文件再上传。我之前文件有讲过Blob，二进制数据，提供了slice，而file继承了Blob的功能，光晕blob相关文章，请看： https://www.haorooms.com/post/js_blobdownload

思路步骤

把大文件进行分段比如2M，发送到服务器携带一个标志，暂时用当前的时间戳，用于标识一个完整的文件

服务端保存各段文件

浏览器端所有分片上传完成，发送给服务端一个合并文件的请求

服务端根据文件标识、类型、各分片顺序进行文件合并

删除分片文件

例如代码如下：

html

选择文件:
        <input type="file" id="haoroomsFileinput"/><br/><br/>
        <div id="progress">
            <span class="red"></span>
        </div>
    <button type="button" id="btn-submit">上 传</button>

js代码

//思路概括
//把大文件分成每2m 一块进行上传，发送到服务器同时携带一个标志 暂时用当前的时间戳 ，
//服务端生成临时文件，服务端接受一个文件结束的标志 ，然后将所有的文件进行合并成一个文件，清理临时文件。 返回结果（看情况）
function submitUpload() {
    var chunkSize=2*1024*1024;//2m
    var progressSpan = document.getElementById('progress').firstElementChild;
    var file = document.getElementById('haoroomsFileinput').files[0];
    var chunks=[],
     token = (+ new Date()),
     name =file.name,chunkCount=0,sendChunkCount=0;

    progressSpan.style.width='0';
    progressSpan.classList.remove('green');

    if(!file){
        alert('请选择文件');
        return;
    }
    //拆分文件
    if(file.size>chunkSize){
        //拆分文件
        var start=0,end=0;
        while (true) {
            end+=chunkSize;
            var blob = file.slice(start,end);
            console.log()
            start+=chunkSize;
            if(!blob.size){
                //拆分结束
                break;
            }
            chunks.push(blob);
        }
    }else{
        chunks.push(file.slice(0));
    }
    console.log(chunks);
    chunkCount=chunks.length;
    //没有做并发限制，较大文件导致并发过多，tcp 链接被占光 ，需要做下并发控制，比如只有4个在请求在发送
    for(var i=0;i< chunkCount;i++){
        var haoroomsfd = new FormData();   //构造FormData对象
        haoroomsfd.append('token', token);
        haoroomsfd.append('haoroomsFileinput', chunks[i]);
        haoroomsfd.append('index', i);
        xhrSend(haoroomsfd,function () {
            sendChunkCount+=1;
            if(sendChunkCount===chunkCount){
                console.log('上传完成，发送合并请求');
                var formD = new FormData();
                formD.append('type','merge');
                formD.append('token',token);
                formD.append('chunkCount',chunkCount);
                formD.append('filename',name);
                xhrSend(formD);
            }
        });
    }
}
function xhrSend(fd,cb) {
    var xhr = new XMLHttpRequest();   //创建对象
    xhr.open('POST', 'http://haorooms.com:8100/fileupload', true);

    xhr.onreadystatechange = function () {
        console.log('state change', xhr.readyState);
        if (xhr.readyState == 4) {
            console.log(xhr.responseText);
            cb && cb();
        }
    }
    function updateProgress(event) {
        console.log(event);
        if (event.lengthComputable) {
            var completedPercent = (event.loaded / event.total * 100).toFixed(2);
            progressSpan.style.width = completedPercent + '%';
            progressSpan.innerHTML = completedPercent + '%';
            if (completedPercent > 90) {//进度条变色
                progressSpan.classList.add('green');
            }
            console.log('已上传', completedPercent);
        }
    }
    //注意 send 一定要写在最下面，否则 onprogress 只会执行最后一次 也就是100%的时候
    xhr.send(haoroomsfd);//发送时  Content-Type默认就是: multipart/form-data; 
}

//绑定提交事件
document.getElementById('btn-submit').addEventListener('click',submitUpload);

服务端代码，对上面做了一些改进

//二次处理文件，修改名称
app.use((ctx) => {
    console.log(ctx.request.files);
    var body = ctx.request.body;
    var files = ctx.request.files ? ctx.request.files.haoroomsFileinput:[];//得到上传文件的数组
    var result=[];
    var fileToken = ctx.request.body.token;// 文件标识
    var fileIndex=ctx.request.body.index;//文件顺序
    if(files &&  !Array.isArray(files)){//单文件上传容错
        files=[files];
    }

    files && files.forEach(item=>{
        var path = item.path.replace(/\\/g, '/');
        var fname = item.name;//原文件名称
        var nextPath = path.slice(0, path.lastIndexOf('/') + 1) + fileIndex + '-' + fileToken;
        if (item.size > 0 && path) {
            //得到扩展名
            var extArr = fname.split('.');
            var ext = extArr[extArr.length - 1];
            //var nextPath = path + '.' + ext;
            //重命名文件
            fs.renameSync(path, nextPath);
            result.push(uploadHost+ nextPath.slice(nextPath.lastIndexOf('/') + 1));
        }
    });

    ctx.body = `{
        "fileUrl":${JSON.stringify(result)}
    }`;

    if(body.type==='merge'){
        //合并文件
        var filename = body.filename,
        chunkCount = body.chunkCount,
            folder = path.resolve(__dirname, '../static/uploads')+'/';
        var writeStream = fs.createWriteStream(`${folder}${filename}`);
        var cindex=0;
        //合并文件
        function fnMergeFile(){
            var fname = `${folder}${cindex}-${fileToken}`;
            var readStream = fs.createReadStream(fname);// 运用了createReadStream
            readStream.pipe(writeStream, { end: false });
            readStream.on("end", function () {
                fs.unlink(fname, function (err) {
                    if (err) {
                        throw err;
                    }
                });
                if (cindex+1 < chunkCount){
                    cindex += 1;
                    fnMergeFile();
                }
            });
        }
        fnMergeFile();
        ctx.body='merge ok 200';
    }
});

三、大文件断点续传

大文件分片上传我们已经实现了，那么断点续传，就是在断网的情况下，继续上传。和大文件分片上传相比，断网下次上传的时候，我们仅仅需要知道哪些上传了，哪些没有上传就可以了，对于已经上传的文件，我们可以提供2中方式，一种是每个文件生成一个hash，存在本地，另一种是这个hash存在服务端，通过接口请求获取。为了不出问题，我们可以存放到服务端。简单起见，我们先讲下如何存在本地。通过获取本地文件hash的方式来续传。

代码如下( 对上面分片上传做了改造)：

var saveChunkKey = 'haoroomschunkuploadedObj';//定义 key

    //获得本地缓存的数据
    function getUploadedFromStorage(){ // 服务端存储更安全，可以通过调用接口的方式获取文件key,这里可以写获取接口的方法getUploadedFromServer(fileHash)
        return JSON.parse( localStorage.getItem(saveChunkKey) || "{}");
    }
    //写入缓存
    function setUploadedToStorage(index) {
        var obj =  getUploadedFromStorage();
        obj[index]=true;      
        localStorage.setItem(saveChunkKey, JSON.stringify(obj) );
    }

//分段对比

    var uploadedInfo = getUploadedFromStorage();//获得已上传的分段信息

    for(var i=0;i< chunkCount;i++){  // 参考上文 大文件分片上传的chunkCount
            console.log('index',i, uploadedInfo[i]?'已上传过':'未上传');

            if(uploadedInfo[i]){//对比分段
                sendChunkCount=i+1;//记录已上传的索引
                continue;//如果已上传则跳过
            }
            var haoroomsfd = new FormData();   //构造FormData对象
            haoroomsfd.append('token', token);
            haoroomsfd.append('haoroomsFileinput', chunks[i]);
            haoroomsfd.append('index', i);
           (function (index) {
                    xhrSend(fd, function () {
                    sendChunkCount += 1;
                    //将成功信息保存到本地
                    setUploadedToStorage(index);
                    if (sendChunkCount === chunkCount) {
                        console.log('上传完成，发送合并请求');
                        var formD = new FormData();
                        formD.append('type', 'merge');
                        formD.append('token', token);
                        formD.append('chunkCount', chunkCount);
                        formD.append('filename', name);
                        xhrSend(formD);
                    }
                });
            })(i);
    }

服务端代码基本不变。

写到这里，基本把断点续传和大文件上传都写了。

前言

一、剪切板上传

二、大文件上传

思路步骤

三、大文件断点续传

Recommend

迅速收藏！109个数据科学面试问答，你绝对不能错过的宝藏库！

Paid Cerberus 'lifetime' licenses are expiring, customers are...

中国股市，颤抖吧。我姐夫来了。。

【Java必修课】图说Stream中的skip()和limit()方法及组合使用

Moonjit – Fork of LuaJIT to Continue Development

Go语言之RWMutex

GTC china 2019参会整理

Porting a JavaScript App to WebAssembly with Rust (Part 1)

MEIZU Hifi Pro USB-C Phone Dongle DAC Review | Audio Science Review (ASR) Forum

难道小公司得技术总监就是一坨屎没人要么

About Joyk