Nodejs模仿multipart表单实现文件上传

有时候就是有这样的需求,Nodejs做webserver,从浏览器端上传文件到后端服务器,Node层只是做一个数据中转,如果在这个过程中,Node webserver需要对数据进行适当加工,然后再Post到后端,那么就得在Node层模拟文件上传了。

首先,通过浏览器上传文件,PostData格式是长着个样子的:

如图,每一组数据其实就是用“-----WebkitFormBoundary.....”分隔开的,最后再用这个分隔符结束,而且,这个分隔符完全是可自定义的。
每一段提交数据,则通过Content-Disposition来描述,未指定Content-Type,则默认text/plain,如果是上传的二进制文件,指定其mime-type即可。
简单封装一个方法,实现Node层的文件上传:

/**
 * 上传文件
 * @param files     经过formidable处理过的文件
 * @param req        httpRequest对象
 * @param postData    额外提交的数据
 */
function uploadFile(files, req, postData) {
    var boundaryKey = Math.random().toString(16);
    var endData = '\r\n----' + boundaryKey + '--';
    var filesLength = 0, content;

    // 初始数据,把post过来的数据都携带上去
    content = (function (obj) {
        var rslt = [];
        Object.keys(obj).forEach(function (key) {
            arr = ['\r\n----' + boundaryKey + '\r\n'];
            arr.push('Content-Disposition: form-data; name="' + key + '"\r\n\r\n');
            arr.push(obj[key]);
            rslt.push(arr.join(''));
        });
        return rslt.join('');
    })(postData);

    // 组装数据
    Object.keys(files).forEach(function (key) {
        if (!files.hasOwnProperty(key)) {
            delete files.key;
            return;
        }
        content += '\r\n----' + boundaryKey + '\r\n' +
            'Content-Type: application/octet-stream\r\n' +
            'Content-Disposition: form-data; name="' + key + '"; ' +
            'filename="' + files[key].name + '"; \r\n' +
            'Content-Transfer-Encoding: binary\r\n\r\n';
        files[key].contentBinary = new Buffer(content, 'utf-8');
        filesLength += files[key].contentBinary.length + fs.statSync(files[key].path).size;
    });

    req.setHeader('Content-Type', 'multipart/form-data; boundary=--' + boundaryKey);
    req.setHeader('Content-Length', filesLength + Buffer.byteLength(endData));

    // 执行上传
    var allFiles = Object.keys(files);
    var fileNum = allFiles.length;
    var uploadedCount = 0;
    allFiles.forEach(function (key) {
        req.write(files[key].contentBinary);
        var fileStream = fs.createReadStream(files[key].path, {bufferSize: 4 * 1024});
        fileStream.on('end', function () {
            // 上传成功一个文件之后,把临时文件删了
            fs.unlink(files[key].path);
            uploadedCount++;
            if (uploadedCount == fileNum) {
                // 如果已经是最后一个文件,那就正常结束
                req.end(endData);
            }
        });
        fileStream.pipe(req, {end: false});
    });
}

思路就这样,代码也不复杂,可能额外需要注意的是,在http.request的response处理中,response.headers可能是gzip的,这个时候buffer不能直接toString,需要通过zlib解码再转换为string,大概思路:

var result = [];
response.on('data', function (chunk) {
    result.push(chunk);
});

// 处理response
var _dealResponse = function (data) {
    var buffer = data;
    try {
        data = data.toString('utf8');
        data = data ? (JSON.parse(data) || data) : false;
    } catch (err) {
        // 接口返回数据格式异常,解析失败
        console.log(err);
    }

    self.res.writeHead(response.statusCode, 'OK', {
        'content-type': 'text/plain; charset=utf-8',
        'content-length': buffer.length
    });
    self.res.write(buffer);
    self.res.end();
};

response.on('end', function () {
    result = Buffer.concat(result);
    // gzip 的数据,需要zlib解码
    if (response.headers['content-encoding'] == 'gzip') {
        zlib.gunzip(result, function (err, dezipped) {
            var data = err ? new Buffer('{}') : dezipped;
            _dealResponse(data);
        });
    } else {
        _dealResponse(result);
    }
});
Mark一下,也许你路过正好需要~~~

时间: 2024-08-01 10:34:20

Nodejs模仿multipart表单实现文件上传的相关文章

Ajax提交Form表单及文件上传的实例代码_AJAX相关

前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f

JS实现表单多文件上传样式美化支持选中文件后删除相关项_javascript技巧

开发中会经常涉及到文件上传的需求,根据业务不同的需求,有不同的文件上传情况. 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善. 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么美化..),同时支持选择文件后自定义删除相关的文件,最后再上传 文章篇幅较长,先简单看看图示: 一.文件上传基础 1. 单文件上传 最简单的文件上传,是单文件上传,form标签中加入enctype="multipart/f

Ajax提交Form表单及文件上传的实例代码

前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Form表单上传有一段Json串和图片文件: Form表单上传图片只需要在<form>标签里加上enctype = 'multipart/form-data',这样是可以上传图片的: 但问题来了,在我进行用Form表单提交的时候直接跳出来提交返回值的页面并且原先的页面刷新: 这样我们可以先到异步的Ajax可以实现局部刷新: 废话不多说了 直接上代码: 首先是html: <form id = "f

node js-node.ja中 当表单含有文件上传时,如何读取数据

问题描述 node.ja中 当表单含有文件上传时,如何读取数据 商品名称 :图片 :(jpg/png小于2M 300*300)为什么我用req.body.salename接受不到参数

php中关于普通表单多文件上传的处理方法

然而有些情况只需要传递几个文件,而且文件体积并不太大,这种情况下使用组件则有点牛刀杀鸡的感觉,通过html自带的<input type="file">表单就可以实现需要的功能,关键在于后台接收程序的处理. php处理上传做的很方便,上传文件的信息通过服务器自动处理到$_FILES数组中,开发者只需要使用的内置处理函数简单操作就可以啦.ASP开发者则没有这么幸运,官方并没有提供直接的处理方法,需要开发者自己设计,这时就需要开发者了解IIS对enctype="mult

java中基于表单的文件上传例子

如果在表单中使用表单元素 <input type="file" />,浏览器在解析表单时,会自动生成一个输入框和一个按钮,输入框可供用户填写本地文件的文件名和路径名,按钮可以让浏览器打开一个文件选择框供用户选择文件: 当表单需要上传文件时,需指定表单 enctype 的值为 multipart/form-data 在 form 元素的语法中,enctype 属性指定将数据发送到服务器时浏览器使用的编码类型. enctype 属性取值: application/x-www-f

php中关于普通表单多文件上传的处理方法_php技巧

然而有些情况只需要传递几个文件,而且文件体积并不太大,这种情况下使用组件则有点牛刀杀鸡的感觉,通过html自带的<input type="file">表单就可以实现需要的功能,关键在于后台接收程序的处理. php处理上传做的很方便,上传文件的信息通过服务器自动处理到$_FILES数组中,开发者只需要使用的内置处理函数简单操作就可以啦.ASP开发者则没有这么幸运,官方并没有提供直接的处理方法,需要开发者自己设计,这时就需要开发者了解IIS对enctype="mult

ASP动态网页实例:表单多文件上传类

动态|上传|网页 <%    Class Upload        Public  Form, Finished        Private bVBCrlf, bSeparate, formData, cFields, folderPath, itemCount, sErrors, sAuthor, sVersion        Private itemStart(), itemLength(), dataStart(), dataLength(), itemName(), itemDat

ajax-不使用form表单springmvc如何上传文件

问题描述 不使用form表单springmvc如何上传文件 项目中需要在之前哥们的代码中加上一个文件上传功能,但是之前哥们写的jsp中使用的div里嵌套的table,并没有使用form表单,提交使用的是ajax,将页面的数据转成json提交到后台的. 我如何在他的基础上将上传的文件传到后台呀?怎么接收,还是用他这个提交按钮?可以实现吗? 解决方案 这里用到HTML 标签的 enctype 属性. enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "