JS上传图片至后端MySQL为空问题，附代码求技术支持

1. 后端配置Multer #

先安装multer依赖：

npm install multer

在app.js中添加multer配置，指定文件存储路径与命名规则：

const multer = require('multer');
const fs = require('fs');

// 配置文件存储逻辑
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    // 自动创建uploads目录（若不存在）
    const uploadDir = './uploads';
    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir);
    cb(null, uploadDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免重复覆盖
    const uniqueName = `${Date.now()}-${Math.random().toString(36).slice(2)}.${file.originalname.split('.').pop()}`;
    cb(null, uniqueName);
  }
});

// 过滤仅允许图片文件上传
const fileFilter = (req, file, cb) => {
  if (file.mimetype.includes('image/')) {
    cb(null, true);
  } else {
    cb(new Error('仅支持JPG/PNG等图片格式'), false);
  }
};

// 初始化multer实例
const upload = multer({ storage, fileFilter });

2. 修改后端影片新增接口 #

将multer的upload.single('poster')（poster对应前端图片字段的name属性）作为中间件加入接口，同时读取上传的文件路径存入数据库：

// 替换原有新增影片接口
app.post('/api/movies', upload.single('poster'), async (req, res) => {
  try {
    // 从req.body获取普通表单字段，req.file获取上传的图片信息
    const movieInfo = {
      ...req.body,
      // 存入数据库的是图片的访问路径
      poster: req.file ? `/uploads/${req.file.filename}` : ''
    };
    
    // 调用数据库插入函数
    const result = await addMovie(movieInfo);
    res.status(201).json(result);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

3. 修正前端表单提交逻辑 #

前端表单必须设置enctype="multipart/form-data"才能支持文件上传，同时用FormData对象提交数据：

<!-- 前端表单示例 -->
<form id="movieForm" enctype="multipart/form-data">
  <input type="text" name="title" placeholder="影片标题" required>
  <input type="text" name="director" placeholder="导演" required>
  <input type="number" name="year" placeholder="上映年份" required>
  <input type="file" name="poster" accept="image/*" required>
  <button type="submit">提交</button>
</form>

// 用Fetch提交表单示例
document.getElementById('movieForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  const res = await fetch('/api/movies', {
    method: 'POST',
    body: formData
  });
  
  const data = await res.json();
  console.log(data);
});

4. 调整数据库操作函数 #

确保addMovie函数正确接收并存储poster字段：

// 数据库插入函数示例（以MySQL为例）
async function addMovie(movieData) {
  const { title, director, year, poster } = movieData;
  const sql = 'INSERT INTO movies (title, director, year, poster) VALUES (?, ?, ?, ?)';
  const [result] = await db.query(sql, [title, director, year, poster]);
  return { id: result.insertId, ...movieData };
}

5. 配置静态文件访问 #

让前端能直接访问上传的图片，在app.js中添加静态目录配置：

app.use('/uploads', express.static('uploads'));

内容的提问来源于stack exchange，提问作者mobly elliot