Angular2 + NodeJs 上传图片到服务器

一个小小的功能，花了接近一天的时间才搞定。网上虽然有很多关于Angular2 上传图片的博客，但基本对我都帮助不大。大多数博客的问题在于，他们只是贴了大段的代码，完全没有强逻辑性的文字描述，大大提高了别人从博客中学习的成本。可能甚至连他们自己都不清楚这个功能是怎么实现的，为什么这样写就能实现了。所以我每次写博客的时候都会先给出一个解决问题的步骤，然后再按步骤进行解决，并贴出相应的代码。这样写的好处是将问题拆分成一个个小问题进行解决，即使别人在参考你的博客的过程中遇到了问题，也可以针对出问题的小点进行其他的搜索，而不必否定整篇博客，重新去看其他的博客。闲话说到这里，回归正题。

虽然接触前端挺久的了，但是图片上传对我来说一直是一个黑盒似的操作。之前也基本是用表单进行提交，中间具体转换成什么，怎么传输到服务器一概不知。如果不用表单，也不知道该怎么实现图片上传，当然不算微信这种提供了相应的api 的“框架”。直到这两天研究angular + nodejs 上传图片的时候才想到一个问题：图片是可以转换成base64 编码的，而base64 编码就是一个字符串，如此一来，那图片上传跟普通的ajax 请求不就没什么区别了吗？

问题已经很清楚了，我们只要在前端构造一个对象，对象中存放个图片的名字类型等信息外加base64 编码，然后把这个对象通过ajax 请求发送给服务器端即可，服务器端接收到请求以后，拿出图片的base64 编码，还原为图片，存储到服务器端的某一个路径下，然后把该路径返回给前端，即可完成图片从浏览器端到服务器端的传输操作。接下来，就是实操环节了。

1. 前端

首先，我们需要通过给html 的input 标签绑定一个事件来获取用户选定的图片的相关信息，html 代码如下：

<input name="img" type="file" id="img-input" (change)="uploadImg($event)"/>

在js 的事件函数中取出图片的信息，放到我们构造的对象中，并将图片转换为base64 编码，然后把相应的编码同样放入该对象中，图片转换为base64 编码的代码也已经放在下面：

uploadImg(event) {
  const imgFile: File = event.target.files[0];
  // post data
  const postData = {
    name: imgFile.name,
    size: imgFile.size,
    type: imgFile.type,
    base64: ''
  };
  const a = new FileReader();
  a.onload = (e) => {
    // 获取base64
    postData.base64 = e.target.result;
    // 上传图片
    this.postService.uploadImg(postData)
      .subscribe(res => {
        if (res.code === 0) {
          // success code
        } else {
          // err code
        }
      });
  };
  a.readAsDataURL(imgFile);
}

2. 后端

后端使用nodejs 中的express 框架来处理请求，基本的配置及路由代码我就不写了（没有写好的可以去这里看：https://blog.csdn.net/u010730897/article/details/66970344?locationNum=5&fps=1），这里放的是处理前端请求的对应的方法：

async uploadImg(req, res, next) {
  // 获得图片base64
  const imgData = req.body.base64;
  const base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
  const dataBuffer = new Buffer(base64Data, 'base64');
  // 设置图像名
  const imgName = req.body.name.split('.')[0] + '_' + Date.parse(new Date()) 
      + '.' + req.body.name.split('.')[1];

  let result = {
    code: 0,
    msg: 'ok',
    data: {}
  }

  // 保存图片
  fs.writeFile('upload_img/' + imgName, dataBuffer, function(err) {
    if(err){
      result.code = -1;
      result.msg = 'error';
    }else{
      result.code = 0;
      // 返回图片位置
      result.data.url = 'http://localhost/angularBlogBk/upload_img/' + imgName;
    }
    res.send(JSON.stringify(result));
  });
}