节点保存 filereader base64 svg 使用 fs 上传

Question

我尝试保存从客户端上传的图像，我的代码适用于 png 和 jpg，但不适用于 svg。什么是最好的方法？

客户端：<input type="file> => fileReader.readAsDataURL => fileReader.result => xhr

服务器端：

saveUserImage(userid, file, base64, callback) {
  if(file.type.indexOf('image') != 0)
    return callback(false);

  var fs = require("fs");

  var regEx = new RegExp('^data:' + file.type + ';base64,');
  base64 = base64.replace(regEx, "");

  fs.mkdir('imgs', function() {
    fs.writeFile('imgs/' + userid + "_" + file.name, base64, 'base64', function(err) {
      if(err) return callback(false);
      return callback('imgs/' + userid + "_" + encodeURIComponent(file.name));
    });
  });
}

我认为保存的 svg 编码错误：

u«ZŠf {û/ƒìf•¶¬{®Þ[™\œÚ[ÛHŒKŒˆ[˜ÛÙ[™ÏHš\ÛËN
NKLHÏ‚KKHÙ[™\˜]ÜŽˆYØ™H[\Ý˜]ÜˆNKŒŒÕ‘È^ÜYËR[ˆˆÕ‘È™\œÚ[ÛŽˆ
‹ŒZ[
HKO‚Ý™È™\œÚ[ÛHŒKŒHˆYH“^Y\—ÌHˆ[œÏHš‹ËÝÝÝËÌË›Ü™ËÌŒÜÝ™Èˆ[œÎž[šÏHš‹ËÝÝÝËÌË›Ü™ËÌNNNKÞ[šÈˆHŒˆOHŒ‚‚HšY]Ð›ÞHŒLËLŒHLËLŒHˆÝ[OH™[˜X›KX˜XÚÙÜ›Ý[™›™]ÈLËLŒHLËLŒNÈˆ[œÜXÙOHœ™\Ù\™H‚Ï‚‚OÏ‚‚BOÏ‚‚BBOÏ‚‚BBBOÏ‚‚BBBBO]Ý[OH™š[ˆÍÈˆH“LLLËŽLË‹Ž˜Í‹ŒÌLKÌ‹
ËŒÍKŒM‹‹ŒÍÎÌÎ‚BBBBBXËMKŒMKLŒN
LMKMËMKŽMLËL‹ŒÎ
‹MKŽÌ˜ËM‹ŒÌLËNÍMËŒÍKLŒML‹ŒÍÍËLÌÎ‚BBBBBPÎL‹ÎNÌ‹
ÍLËŒNN‹Ì
KLLËŽLË‹Žžˆ‹Ï‚‚BBBOÙÏ‚‚BBBOÏ‚‚BBBBO]Ý[OH™š[ˆÌÌÌÍŒÐNÈˆH“NKŽLNK
ÌËŒÌÍ˜ËM‹ŒÌLËNÍMËŒÍKLŒML‹ŒÍÍËLÌÎ‚BBBBBXÍKŒM‹LLŒN
MKM‹LMKŽMLË‹ŒÎ
KLMKŽÌˆ‹Ï‚‚BBBOÙÏ‚‚BBBOÏ‚‚BBBBO]Ý[OH™š[ˆÌÌÌÍŒÐNÈˆH“NLŒŒK
ÍŽÍØËLŒL‹LŒŒÎLŒKLŒÍNLŒ˜ËL
ÍLŒ
‹LŽLMËLŒŒÍLKŒNM‹LŒMÂ‚BBBBBXËM‹ŽLKNKLËMËŽ
KLŒKŽ
LKL‹MËLÌ‹ŒXÍKŒÌLËLLŒŽL‹MKÍÎKLM‹
‹ËŒÍÍ‹LM‹
˜ÌŒL‹ŒŒÎŒKŒÍNŒ‚‚BBBBBXÌ
ÍŒ
‹ŽLMËŒŒÍKŒNM‹ŒMØÍ‹ŽLKKLË
ËŽ
‹ŒKŽ
LK‹NÌ‹ŒPÌLL‹ŒÌË
Ž
LKŽ

svg 支持会很好，有什么想法吗？

Answer 1

问题是，svg 的 mime 类型是 image/svg+xml！加号未转义且正则表达式不匹配。我使用了一个简单的函数来转义，现在它可以完美运行

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\^$\|]/g, "\$&");
}

Answer 2

您也可以试试 js-base64-file 模块。只需先将原始 svg 保存到磁盘，然后再进行转换。

github repo

const Base64File=require('js-base64-file');
const image=new Base64File;

const file='test.svg';

//path should alwas end in a /
const path=`${__dirname}/`;

//this will load and convert if needed
const data=image.loadSync(path,file);
console.log('you could send this image via ws or http to the browser now : \n',data);

image.save(data,path,`copy-b64-${file}`);

您可以在 test.js 文件中看到一个异步示例。

节点保存 filereader base64 svg 使用 fs 上传

Node save filereader base64 svg upload with fs

node.js

svg

base64

fs

writefile