[JavaScript知识库]node服务器端接收前端上传图片并返回url路径保存数据库

通过npm安装multer插件https://www.npmjs.com/package/multer

首先先在node根目录的入口js文件中注册express.static中间件

/images是express.static?函数指定一个虚拟的静态目录，指向../uploads本地目录，可以改成./uploads 或者/uploads绝对路径，./uploads指向的就是项目跟目录下的uploads,文件夹需要提前建好，还需引入node中的path模块

app.use('/images', express.static(path.join(__dirname, '../uploads')));

通过express.router将方法导出，在node入口js文件中注册，前端调用uploadImg接口，将拼接好的图片url返回给前端就可以了

const express = require('express');
const router = express.Router();
const multer = require("multer");
const key = require('../../config/keys')

// 设置图片存储路径
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../uploads'); // ../uploads是将存放图片文件夹创建在node项目平级，./uploads会存放在node项目根目录下，需要提前建好文件夹，否则会报错
  },
  filename: function (req, file, cb) {
    cb(null, `${Date.now()}-${file.originalname}`) // 文件名
  }
})

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

/***
 * 图片上传 并将拼接好的图片url返回给前端，示例：（http://127.0.0.1:8000/images/xxxx.png）
 */
router.post('/uploadImg', upload.single('file'), (request, res) => {
  res.json({
    code: 200,
    data: {
      img: `http://172.0.0.1:8056/images/${request.file.filename}`
    },
    msg: '上传成功'
  })
})

module.exports = router

const common = require('./router/common/common')
app.use("/api/common",common)

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖