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)

以下是一个简单的Vue组件,使用Element UI中的Upload组件和Node.js的Express框架来实现图片上传并返回图片路径的功能。 前端代码: ``` <template> <div> <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :auto-upload="false" :file-list="fileList" list-type="picture-card" :limit="1" > <i class="el-icon-plus"></i> </el-upload> </div> </template> <script> export default { data() { return { fileList: [], imageUrl: '', }; }, methods: { handleSuccess(response, file, fileList) { this.imageUrl = response.url; this.$emit('upload-success', this.imageUrl); }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg'; const isPNG = file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isPNG) { this.$message.error('上传图片只能是 JPG/PNG 格式!'); return false; } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!'); return false; } return true; }, }, }; </script> ``` 后端代码: ``` const express = require('express'); const multer = require('multer'); const path = require('path'); const app = express(); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'public/images'); }, filename: function (req, file, cb) { const ext = path.extname(file.originalname); cb(null, Date.now() + ext); }, }); const upload = multer({ storage: storage }); app.post('/api/upload', upload.single('file'), (req, res) => { const file = req.file; const url = `http://${req.headers.host}/images/${file.filename}`; res.json({ url }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 在前端代码中,我们使用了Element UI中的Upload组件来实现图片上传的功能。其中,我们设置了上传路径、上传成功的回调函数、上传前的校验函数等。 在后端代码中,我们使用了Node.js的Express框架和multer中间件来处理文件上传。我们设置了文件存储路径和文件命名规则,并在上传完成后返回图片的访问路径。 最后,我们可以在Vue组件中监听`upload-success`事件来获取上传成功后返回图片路径
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值