上传图片

之前搞微信上的图片上传，想直接通过接口上传到自己的图片服务器，发现移动端浏览器上挺多坑的，使用最简单的form-data形式好像不成。研究了一下，发现base64格式通用性较强。

base64编码

base64是一种使用可打印字符来描述二进制数据的方法。base64字符集共有64个字符，包括a-zA-Z0-9共62个，另外两个符号为+和/。

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/
1

由于2⁶=64，因而该64个字符只能描述6bits的数据，换句话说，3个字节有24bits，对应着4个base64字符。在做base64编码时，一般要在字节流最后补充一到两个0，相应的，编码完成后，要在base64串最后补充一到两个=。

解码

解码就是根据base64串还原二进制数据的过程。

图片显示

img标签是可以直接显示base64编码的图片，像下面这样：

<img src="data:image/gif;base64,R0lGODlhAwADAIABAL6+vv///yH5BAEAAAEALAAAAAADAAMAAAIDjA9WADs=" />
1

图片上传

图片上传可以通过form-data/Blob对象等方式，但针对不同的浏览器可能会出现适配上的问题。

如果将图片转化为base64格式，得到的就是一个字符串，可以通过POST上传到服务器。所有浏览器对POST方法肯定是支持的，这个办法通用性比较强。美中不足的是，图片通常比较大，POST请求本身对数据大小是没有限制的，但是一般后台会限制上传数据大小，这个时候就需要后台配合，允许上传较长数据。

在前端，可以使用FileReader得到本地图片的base64编码。代码如下：
HTML（图片选择框）：

<input class="select" type="file" accept="image/*" onchange="change(this)">
1

js：

function change (obj) {    if (!obj.files.length) return;    if (obj.files.length > 1) {        alert("只允许上传一张图片!");        return;    }    var file = obj.files[0];    var reader = new FileReader();    reader.onload = function () {        var result = this.result;    //data:base64              $.post('/upload', {'base64': result}, function(result) {        });    };    reader.readAsDataURL(file);}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

后端接收

后端使用connect-multiparty中间件。
安装

npm install --save connect-multiparty
1

后端接收代码：

var multipart = require('connect-multiparty');var multipartMiddleware = multipart();router.post('/', multipartMiddleware, function(req, res, next) {    var base64Data = req.body.base64.replace(/^data:image\/.*;base64,/, "");//remove head    var ext = req.body.base64.match((/^data:([A-Za-z-+\/]+);base64)[1];     var target_path = 'out.' + ext;    fs.writeFile(target_path, base64Data, 'base64', function(err) {        if (!err) {                     res.json({'msg':'success'});        }    });});
1
2
3
4
5
6
7
8
9
10
11
12
13

至此，一个完整的前端图片上传完成。而且由于是采用了base64编码来实现，包括微信、移动在内各个浏览器都能适应。

前端压缩

在移动端，手机拍照图片会比较大，可以使用canvas的toDataURL接口进行压缩。
对于前端压缩，可以参考此文，其代码也在github上。
为了应对IOS上canvas大小的限制，该代码采用了瓦片绘制，就是将原图切割成一个一个的矩形来绘制的。在使用时候，边界没处理好，有些图片压缩后有明显的痕迹。
有时间的话，可以对此进行优化。

参考

base64

NodeJS: Saving a base64-encoded image to disk

移动前端图片压缩

前端压缩示例

转载来源 ：http://blog.csdn.net/dreamer2020/article/details/51794450