nodejs+multiparty+FormData上传文件

最新推荐文章于 2021-06-08 18:25:11 发布

weixin_33998125

最新推荐文章于 2021-06-08 18:25:11 发布

阅读量354

点赞数 1

原文链接：https://my.oschina.net/mdu/blog/909204

版权

为什么80%的码农都做不了架构师？>>>

server端

app.post('/api/upl', (req,res) => {
    console.log('接到请求')
    var form = new multiparty.Form({
        encoding:"utf-8",
        uploadDir:"./uploads",  //文件上传地址
        keepExtensions:true  //保留后缀
    });
    console.log(form.parse)

    form.parse(req, function(err, fields, files) {
        // fs.renameSync(files.path,files.originalFilename);

        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end(util.inspect({fields: fields, files: files}));
    });

})

HTML

<form enctype="multipart/form-data" method="post" id="form" name="fileinfo">
        <label>点击图片选择:</label>
        <input class='check' type="file" name="file" id='file'/>
<!--         <input type="submit" value="提交" id="upload"/> -->
        <button  id="upload">提交1</button>
    </form>
    <div class="co">
        <div class="co1"></div>
    </div>
    <div id="box">123</div>

-------------

<script type="text/javascript">
document.getElementById("upload").onclick = function(event){
    var BYTES_PER_CHUNK = 512 * 1024; // 每个文件切片大小定为1MB
    var slices; // 切片
    var totalSlices; // 縂切片書
    event.preventDefault()
//发送请求
    console.log(event)
    // alert(123)
    var blob = document.getElementById("file").files[0];
    var start = 0;
    var end;
    var index = 0;
    console.log(blob)

    // 计算文件切片总数
    slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
    totalSlices = slices;
    while (start < blob.size) {
        console.log('第' + index + '片')
        end = start + BYTES_PER_CHUNK;
        if (end > blob.size) {
            end = blob.size;
        }
        uploadFile(blob, index, start, end, totalSlices)
        start = end;
        index++;
        if (index >= totalSlices) {
            console.log('切片傳送完成')
        }
    }
}


//上传文件
function uploadFile(blob, index, start, end, totalSlices){
    var xhr;
    var fd;
    var chunk;
    var sliceIndex =index + '/' + totalSlices +'_' + blob.name; // 分段文件名
    chunk = blob.slice(start, end); //切割文件
    console.log('start 是：'+start+'|||| end 是：'+end)
    fd = new FormData();
    fd.append("upname", chunk, sliceIndex);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://127.0.0.1:3003/api/upl', true);
    xhr.onreadystatechange=function(){
      if (xhr.readyState==4 && xhr.status==200){
        // alert(1)
        }
      }

    xhr.send(fd);

    // if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    //     // $('.co').html(xhr.responseText)
    //     // console.log(xhr.responseText)
    //     console.log('000')
    // } else {
    //     console.log('555')
    //     // uploadFile(blob, index, start, end);
    // }
}

添加进度条

 xhr.upload.onprogress = function(evt){  
        var loaded = evt.loaded;  
        var tot = evt.total;  
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比  
        var co1 =  document.getElementById('co1');  
        co1.innerHTML = per+"%";  
        co1.style.width=per+"%";  
    }

转载于:https://my.oschina.net/mdu/blog/909204