Nuxt CNode：Node.js专业中文社区

上传文件时，怎样返回上传进度给前台？

发布于 8 年前作者 Sxy97 7022 次预览最后一次回复是 7 年前来自问答

我通过formidable中间件，获取文件上传进度，怎样返回给前台呢？

form.on('progress', function(bytesReceived, bytesExpected) {
            console.log(`bytesReceived:${Math.round(bytesReceived/bytesExpected*100)}`)
        });

4 回复

luanxuechao

1楼•8 年前

前端也可以通过progress 事件监听一般上传文件的插件会有

CodeofGame

2楼•7 年前

如果是前端的话，其实不用后台返回进度，可以使用h5中 XMLHttpRequest对象的upload属性，upload能监听的事件有 onloadstart 获取开始 onprogress 数据传输进行中 onabort 获取操作终止 onerror 获取失败 onload 获取成功 ontimeout 获取操作因用户指定的延迟时间内未完成 onloadend 获取完成（不能成功与否））下面贴段代码

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function showProgress(event){
    //已经上传的字节数
	var loaded=event.loaded;
	//文件总的字节数
	var total=event.total;
	//上传进度
	var percent = (loaded / total) * 100 + "%";
})
//上传文件要发送post的ajax请求
xhr.open("POST", "/upload");
xhr.send(文件数据);

Sxy97

3楼•7 年前

@CodeofGame谢谢，提供了一种方法，你说的这种通过XMLHttpRequest上传图片，然后监听实现进度显示。但是我上传完之后还要返回数据，这种的怎样接受？

CodeofGame

4楼•7 年前

@Sxy97

//服务端代码
var http = require("http");
var formidable = require("formidable");
var path=require("path");

http.createServer(function (req, res) {
    if (req.method == "POST" && req.url == "upload") {
        var form = new formidable.IncomingForm();
        //文件的上传路径
        form.uploadDir =path.join(process.cwd(),"public/images");
        //编码格式
        form.encoding = 'utf-8';
        //是否保留文件扩展名
        form.keepExtensions = true;
        //处理post过来的数据
        form.parse(req);
        //监听文件上传事件
        form.on('file', function (name, file) {

        });
		//监听文件上传进度
        form.on('progress', function (bytesReceived, bytesExpected) {
            var percent=bytesReceived/bytesExpected*100+"%";
        });
        //监听文件上传完毕事件
        form.on('end', function () {
            res.end("传入返回客户端的数据");
        });
    }
})