使用base64进行移动端图片上传

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

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

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

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

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

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

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

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

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

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

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

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);
}

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

npm install --save connect-multiparty

后端接收代码：

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"});
        }
    });
});

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

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

base64

NodeJS: Saving a base64-encoded image to disk

移动前端图片压缩

前端压缩示例