NodeJs: 上传图片到服务器

信息爆炸的时代，获取到信息的门槛大大降低，但同时也加大了我们理解信息的难度。针对某一个问题，网上会有关于这个问题的好多篇博客或文章。但是翻过一遍后会发现，这些文章中去掉全文都是代码、什么解释也没有的，复制粘贴的，使用各种不必要的框架解决问题的，描述逻辑混乱的，再去掉排版不好看着不舒服的，之后也没几篇能看的了。每个人似乎都在想要提供一个解决方案，但是描述问题的时候能否按逻辑来，一步步走，代码加点注释啥的。我自己写东西或者解决问题的时候喜欢先理清需求，划分步骤，然后一步一步来。比如说，NodeJs 如何实现上传图片到服务器。

1. 任务需求

很常见的一个场景。用户注册页面更换头像后，将图片上传到服务器存储并返回图片在服务器的地址。这里需要注意的一个问题是因为要获取服务器返回的图片地址，所以要异步提交表单。

2. 步骤划分

• 前端js 代码中判断表单中的图片发生变化时，异步提交表单。
• 服务器端js 接收到请求，存储图片并返回图片url。
• 前端js 处理返回请求获取图片url。

3. 代码实现

3.1 前端html 

<img class="photo photo-img" src="">
<form id="img_form" action="" method="POST" enctype="multipart/form-data">
  <input name="img" type="file" id="img-input" onchange="changeImg()" style="display: none"/>
</form>

3.2 前端js

因为异步提交表单要用到form.ajaxSubmit，所以需要在html 的头文件中引入jquery.form.js，下载地址：

http://malsup.github.io/jquery.form.js

function changeImg() {
  // 图片更改后异步提交表单上传服务器，返回url
  var form = $("#img_form");
  var options = {
    url: domain + '/upload/img', //上传文件的路径
    type:'post',
    success:function(data){
      data = JSON.parse(data);
      if(data.code == 0) {
        imgUrl = data.data.url;
      } else {
      	alert('上传图片出错！');
      }
    }
  };
  form.ajaxSubmit(options);

  // 在前端显示上传的图片
  var file = $('.photo').find('input')[0].files[0];
  var reader = new FileReader();
  reader.onload = function(e){
  var imgFile = e.target.result;
    $('.photo-img').attr('src',imgFile);
    $('.photo-img').attr('style','display:block');
  }
  reader.readAsDataURL(file);
}

3.3 后端js

文件上传需要用到multer 包，所以需要在app.js 中引入，app.js 写法：

"use strict"

var express = require('express');
var multer = require("multer");
var app = express();
var bodyParse = require('body-parser');

// 设置图片存储路径
var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, './uploads');
  },
  filename: function(req, file, cb) {
    cb(null, `${Date.now()}-${file.originalname}`)
  }
})

// 添加配置文件到muler对象。
var upload = multer({ storage: storage });
var imgBaseUrl = '../'

// bodyParse 用来解析post数据
app.use(bodyParse.urlencoded({extended:false}));
app.use(express.static('public'));

// 解决跨域问题
app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

  if (req.method == 'OPTIONS') {
    res.send(200); /让options请求快速返回/
  }
  else {
    next();
  }
});

// 文件上传请求处理，upload.array 支持多文件上传，第二个参数是上传文件数目
app.post('/upload/img', upload.array('img', 2), function (req, res) {
  // 读取上传的图片信息
  var files = req.files;

  // 设置返回结果
  var result = {};
  if(!files[0]) {
    result.code = 1;
    result.errMsg = '上传失败';
  } else {
    result.code = 0;
    result.data = {
      url: files[0].path
    }
    result.errMsg = '上传成功';
  }
  res.end(JSON.stringify(result));
});

// 监听3000端口
var server=app.listen(3000, '0.0.0.0', function () {
  console.log('listening at =====> http://0.0.0.0:3000......');
}) ;

Ref: 一步一步搭建一个图片上传网站

Ref: nodejs文件上传就是这么简单