Nodejs把接收图片base64格式保存为文件存储到服务器上

下面是详细讲解Nodejs把接收图片base64格式保存为文件存储到服务器上的完整攻略，过程中包含两条示例说明。

1. 接收base64格式图片数据

在Nodejs中接收base64格式图片数据，可以使用request模块或者express框架的post方式接收。下面是使用express框架接收的示例代码：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/upload', function (req, res) {
  const base64Data = req.body.image.replace(/^data:image\/\w+;base64,/, '')
  const buffer = new Buffer.from(base64Data, 'base64')
})

上述代码中，使用了express框架中的bodyParser中间件解析客户端POST请求传递过来的图片base64数据，然后把新的Buffer实例对象存入buffer变量中。

2. 保存为文件到服务器

Nodejs中可以使用文件系统模块fs来把接收到的base64格式图片保存为文件。下面是将图片存储在本地的示例代码：

const express = require('express')
const bodyParser = require('body-parser')
const fs = require('fs')
const path = require('path')
const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/upload', function (req, res) {
  const base64Data = req.body.image.replace(/^data:image\/\w+;base64,/, '')
  const buffer = new Buffer.from(base64Data, 'base64')
  const filename = "image_" + Date.now() + ".png"
  fs.writeFile(path.join(__dirname, 'uploads', filename), buffer, function (err) {
    if (err) return console.log(err)
    console.log('Image saved successfully.')
  })
})

上述代码中，使用了fs.writeFile方法，把接收到的图片存储到服务器uploads目录下，并以时间戳命名图片文件名，从而避免了文件名冲突问题。

3. 返回保存的文件路径

在实际应用中，我们需要返回保存在服务器上的图片的访问路径。示例如下：

const express = require('express')
const bodyParser = require('body-parser')
const fs = require('fs')
const path = require('path')
const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/upload', function (req, res) {
  const base64Data = req.body.image.replace(/^data:image\/\w+;base64,/, '')
  const buffer = new Buffer.from(base64Data, 'base64')
  const filename = "image_" + Date.now() + ".png"
  const filePath = path.join(__dirname, 'uploads', filename)
  fs.writeFile(filePath, buffer, function (err) {
    if (err) return console.log(err)
    console.log('Image saved successfully.')
    res.send({
      code: 0,
      message: "上传成功",
      data: {
        url: "http://" + req.headers.host + "/uploads/" + filename
      }
    })
  })
})

上述代码中，我们在文件保存成功后，使用res.send方法将保存图片的访问路径url返回给客户端，以便客户端可以在页面中显示保存的图片。

示例说明

示例1

客户端上传一个base64格式图片，服务端接收后，将图片保存在本地，然后返回图片的访问路径。

客户端发送POST请求

const postData = {
  image: "data:image/png;base64,iVBORw0KG..."
}

axios.post('/upload', postData)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

服务端接收后，保存图片到本地

服务端接收数据，将图片保存在本地uploads目录下，返回图片访问路径给客户端。

const express = require('express')
const bodyParser = require('body-parser')
const fs = require('fs')
const path = require('path')
const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.post('/upload', function (req, res) {
  const base64Data = req.body.image.replace(/^data:image\/\w+;base64,/, '')
  const buffer = new Buffer.from(base64Data, 'base64')
  const filename = "image_" + Date.now() + ".png"
  const filePath = path.join(__dirname, 'uploads', filename)
  fs.writeFile(filePath, buffer, function (err) {
    if (err) return console.log(err)
    console.log('Image saved successfully.')
    res.send({
      code: 0,
      message: "上传成功",
      data: {
        url: "http://" + req.headers.host + "/uploads/" + filename
      }
    })
  })
})

app.listen(3000, function () {
  console.log('Server start at port 3000.')
})

客户端收到数据后，显示上传的图片

在客户端页面中展示上传图片的url地址。

<img src="http://localhost:3000/uploads/image_1528569107419.png">

示例2

客户端使用FormData方式上传图片，服务端接收后，将图片保存在本地，然后返回图片的访问路径。

客户端发送POST请求

在客户端使用FormData对象，并将base64格式图片数据添加到FormData中。如果有其它需要添加的Parameter，则一并添加到FormData中。

const fileToUpload = document.querySelector('#fileToUpload').files[0]
const reader = new FileReader();
reader.onload = function (event) {
  const fileData = event.target.result.split(',')[1]
  const formData = new FormData()
  formData.append('parameter1', 'upload image')
  formData.append('parameter2', 'upload image')
  formData.append('image', fileData)
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(response => {
    console.log(response.data)
  }).catch(error => {
    console.log(error)
  })
}
reader.readAsDataURL(fileToUpload)

服务端接收后，保存图片到本地

服务端使用multer中间件来解析FormData数据，将图片保存在服务器的uploads目录下，并返回保存图片的url地址。

const express = require('express')
const bodyParser = require('body-parser')
const fs = require('fs')
const path = require('path')
const multer = require('multer')
const app = express()

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

const upload = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, path.join(__dirname, 'uploads'))
    },
    filename: function (req, file, cb) {
      const extName = path.extname(file.originalname)
      cb(null, 'image_' + Date.now() + extName)
    }
  })
})

app.post('/upload', upload.single('image'), function (req, res) {
    console.log('Image saved successfully.')
    res.send({
      code: 0,
      message: "上传成功",
      data: {
        url: "http://" + req.headers.host + "/uploads/" + req.file.filename
      }
    })
})

app.listen(3000, function () {
  console.log('Server start at port 3000.')
})

客户端收到数据后，显示上传的图片