阅读数:

node保存base64编码的图片

0

说明

web开发中经常遇到的一种场景就是保存图片到服务器,这里的服务器可能是专门的图片服务器也可能是
api服务器。我们常用的做法就是利用标签为input[type=’file’]的DOM就客户端的
file对象拿到服务器进行处理,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
router.post('/uploadfile', multipart(), function (req, res, next) {
var files = req.files.files;
var filename = files.originalFilename || path.basename(files.path);
//复制文件到指定路径
var targetPath = process.cwd() + '\/uploads\/' + filename;
//复制文件流
try{
var readable = fs.createReadStream(files.path).pipe(fs.createWriteStream(targetPath));
readable.on('close', function(){
neetupload(targetPath,function(code,data){
if(code === 500){
res.json(util.error(data));
}else{
res.json(util.success({
url:data
}));
}
});
});
readable.on('error', function(err){
res.json(util.error('上传失败'));
});
}catch(e){
res.json(util.error('上传失败'));
}
});

原理就是通过文件流的方式就客户端文件copy到服务器然后上传到图片服务器上。
但有时候面对大的图片文件的时候可能就比较慢了、不得不加上烦人的loading等待或者文件大小限制等。此时我们可以考虑在前端利用lrz对图片进行压缩处理,生成base64编码,甚至还可以对base64做zlib压缩,进一步减小传输大小,当服务端接到base64编码的参数数,我们可以将base64解析成本地文件,再做上传,参考代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
router.post('/uploadfilebase64', function (req, res, next) {
var dataInfo = req.body;
dataInfo = dataInfo.data;
var filename = dataInfo.filename;
//复制文件到指定路径'
var targetPath = process.pwd() + '\/uploads\/' + filename;
//复制文件流
try{
//过滤data:URL
var base64Data = dataInfo.base64.replace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fs.writeFile(targetPath, dataBuffer, function (err) {
if (err) {
res.json(util.error('上传失败'));
} else {
neetupload(targetPath,function(code,data){
if(code === 500){
res.json(util.error(data));
}else{
res.json(util.success({
url:data
}));
}
});
}
});
}catch(e){
res.json(util.error('上传失败'));
}
});

最后

考虑到易用性和兼用性,因为有些手机客户端可能对lrz不支持,所以我们可以在前端区分对待,支持lrz压缩就用base64的方式,不支持的可以采用原始的方式,最终实现图片上传的完美解决方案


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^