express实现图片上传

最新推荐文章于 2024-10-05 23:10:37 发布

原创最新推荐文章于 2024-10-05 23:10:37 发布 · 794 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#express

功能实现专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Express框架中集成Multer模块来处理图片上传，包括设置存储配置、解析POST请求、静态文件托管、跨域处理以及API路由的使用。

在express中可以使用multer实现图片上传

下载express multer

npm install multer express

import express from 'express'
import multer from 'multer'
const app = express()
// 设置存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 确保这个文件夹已经存在
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + file.originalname)
  }
})
 
const upload = multer({ storage: storage });

// 解析post请求body参数
app.use(express.urlencoded({extended: false }))
app.use(express.json())
// 托管静态文件
app.use('/uploads', express.static('uploads'))
// 设置跨域
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});
// 处理上传的图片
app.post('/upload', upload.single('image'), (req, res) => {
  const file = req.file;
  console.log(file);
  if (!file) {
    return res.status(400).send('No file uploaded.');
  }
  res.json('File uploaded successfully.');
});

import routerLogin from './router/login.js'
import routerList from './router/list.js';
app.use('/api', routerLogin)
app.use('/api', routerList)
const port = 4000
app.listen(port, () => {
  console.log(`端口运行于http://127.0.0.1:${port}`);
})