图片上传

1. 专门新建一个对应的接口实现图片上传，在app.js中增加路由中间件，和引用routers下的对应模块js

var albumRouter = require('./routes/album.js');
...
app.use('/album', albumRouter);

2. 在routers中新建 album.js
   注意点
   文件、图片、音频、视频的上传都是post

const express = require('express');

const router = express.Router();

router.post('/', upload.any(), (req, res, next) => {//upload.any()是之后写入的
    // console.log(req.body);
    res.render('album', {
        data: JSON.stringify({
            status: 200,
            info: '上传成功'
        })
    })
})

module.exports = router;

3. 新建前端界面

<form 
        enctype="multipart/form-data"
        id="uploadForm"
      >
        <input type="file" name="album" id="album">  <br/>
    
        <button type="button" class="btn btn-primary"> 提交 </button>
      </form>

$('button').on('click',function () {
    $.ajax({
      url: 'http://localhost:3000/album',
      type: 'POST',
      data: new FormData($('#uploadForm')[0]),
      processData: false,//必须
		  contentType: false,//必须
      success: function(data) {
        console.log(data)
      }
    })
  })

注意点：

• processData设置为false。因为data值是FormData对象，不需要对数据做处理。
• <form>标签添加enctype="multipart/form-data"属性。
• cache设置为false，上传文件不需要缓存。
• contentType设置为false。因为是由<form>表单构造的FormData对象，且已经声明了属性enctype="multipart/form-data"，所以这里设置为false

4. 此时后端接收到的req.body是一个空对象，前端传来的是二进制，此时需要一个转换，安装第三方模块

$ cnpm i multer -S

5. 使用它，并且把图片存在public中的upload（新建）目录下

const express = require( 'express' )
const multer = require( 'multer' )
const router = express.Router()
const path = require( 'path' )

// 进行文件的磁盘存储

var storage = multer.diskStorage({
  destination: function (req, file, cb) { //这个表示存储路径，往哪里存储
    cb(null, path.join( __dirname, '../public/upload') )
  },
  filename: function (req, file, cb) {// 给前端发来的文件起名
    console.log('file',file)
    const type = file.originalname.slice( file.originalname.indexOf('.') )
    const filename = file.fieldname + '-' + Date.now() + type 
    cb(null, filename)
  }
})

var upload = multer({ storage: storage })