欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-19 11:01:46
...

前言
文件上传是开发中经常遇到的,市面上也有很多插件。直接封装了上传的方法,使用起来很简单。使用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(haoroomsfd,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(haoroomsfd, 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);
    }

服务端代码基本不变。

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

相关标签: JavaScript

上一篇: QFileInfo

下一篇: