如何在Multipart Form Data中上传文本与文件？图片改名实现方法咨询

1. 如何在Multipart Form Data中同时上传文本数据与文件？ #

核心是通过FormData对象封装文本字段和文件，后端解析对应字段即可，以下是前后端实现示例：

前端实现（原生JavaScript） #

// 初始化FormData实例
const formData = new FormData();

// 添加文本字段
formData.append('user_id', 'u_1001');
formData.append('remark', '产品封面图');

// 添加文件（假设页面有id为imgInput的文件选择框）
const imgInput = document.getElementById('imgInput');
formData.append('cover_img', imgInput.files[0]);

// 发送上传请求
fetch('/api/upload', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(data => console.log('上传结果:', data))
.catch(err => console.error('上传失败:', err));

后端实现示例（Node.js + Express） #

使用multer中间件解析Multipart Form Data：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置文件存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './static/uploads/');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
const upload = multer({ storage: storage });

// 处理上传接口，同时接收文本和文件
app.post('/api/upload', upload.single('cover_img'), (req, res) => {
  // 获取前端传来的文本数据
  const userId = req.body.user_id;
  const remark = req.body.remark;
  // 获取文件信息
  const fileInfo = req.file;

  console.log('文本参数:', { userId, remark });
  console.log('文件信息:', fileInfo);
  
  res.json({ code: 200, msg: '上传成功' });
});

app.listen(3000, () => console.log('服务启动在3000端口'));

2. 上传图片时附带Item ID修改文件名的实现方案 #

方案一：前端带Item ID，后端修改文件名 #

前端操作

在FormData中添加Item ID字段即可，和上传文本数据逻辑一致：

const formData = new FormData();
const imgInput = document.getElementById('imgInput');
const itemId = 'item_202405'; // 可从页面状态或接口获取

formData.append('item_id', itemId);
formData.append('item_img', imgInput.files[0]);

// 发送请求逻辑同上

后端操作（Node.js + Express）

在multer的文件名配置中结合Item ID生成新名称：

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './static/item_imgs/');
  },
  filename: (req, file, cb) => {
    // 获取前端传入的item_id
    const itemId = req.body.item_id;
    // 提取文件扩展名
    const ext = file.originalname.split('.').pop();
    // 生成新文件名
    const newFileName = `${itemId}.${ext}`;
    cb(null, newFileName);
  }
});
const upload = multer({ storage: storage });

app.post('/api/upload-item-img', upload.single('item_img'), (req, res) => {
  res.json({ code: 200, filename: req.file.filename });
});

方案二：前端直接修改上传文件名 #

前端无法修改本地文件的真实名称，但可以在上传时通过File构造函数生成新的文件对象，指定自定义名称：

const formData = new FormData();
const imgInput = document.getElementById('imgInput');
const originalFile = imgInput.files[0];
const itemId = 'item_202405';
const ext = originalFile.name.split('.').pop();
const newFileName = `${itemId}.${ext}`;

// 创建新文件对象，替换原文件名
const renamedFile = new File([originalFile], newFileName, {
  type: originalFile.type
});

formData.append('item_img', renamedFile);

// 发送请求后，后端接收到的文件名就是修改后的名称

注意：此方式仅修改上传请求中的文件名，本地原文件名称不会改变。

内容的提问来源于stack exchange，提问作者Ketan Rathod