POST请求如何上传图片？客户端传图后服务器接收file为空如何解决

问题核心原因 #

• 你不能把FormData对象嵌套在普通JSON参数里提交，浏览器不会自动序列化嵌套的FormData，同时上传文件+普通字段必须把所有参数都放到同一个FormData实例里，不能分开封装。
• 请求头配置大概率不符合要求，用FormData上传文件时不需要手动设置Content-Type，浏览器会自动生成带boundary的multipart/form-data类型请求头，手动设置反而会导致解析失败。
• 服务端没有配置解析multipart/form-data类型请求的中间件，默认的JSON解析器只能处理普通JSON请求，解析不了文件上传的表单数据。

客户端修复方案 #

把所有要传递的参数都写入同一个FormData实例，直接传递FormData作为请求体，不要封装为普通JSON对象：

const [selectedFile, setSelectedFile] = useState();

const changeHandler = (event) => {
  setSelectedFile({
    preview: URL.createObjectURL(event.target.files[0]),
    file: event.target.files[0]
  });
};

const handleSubmission = (e) => {
  e.preventDefault();
  // 所有参数都放入同一个FormData实例
  const formData = new FormData();
  formData.append("file", selectedFile.file);
  formData.append("patientID", 1);
  formData.append("recordType", 'IMAGE');
  formData.append("_contentType", selectedFile.file.type);
  formData.append("fileExtension", selectedFile.file.name.split('.').pop());

  // 直接传入FormData作为请求参数
  Physician.uploadFileToPatientDatabase(formData);
};

注意：如果你的Physician.uploadFileToPatientDatabase方法内部是用axios/fetch封装的，不要手动设置Content-Type: application/json或者Content-Type: multipart/form-data，留空让浏览器自动处理即可。

服务端修复方案 #

以常用的Node.js Express框架为例，需要安装multer中间件解析multipart/form-data请求：

1. 安装依赖：npm install multer
2. 调整路由和接口逻辑：

const multer  = require('multer')
// 配置内存存储，不需要存本地磁盘可直接拿到文件buffer上传到S3
const storage = multer.memoryStorage()
const upload = multer({ storage: storage })

// 路由配置添加upload.single('file')中间件，参数对应FormData里的文件字段名
app.post('/你的上传接口路径', upload.single('file'), imageUpload)

// 接口逻辑调整
static async imageUpload(req, res) {
  console.log(req.body) // 此处可拿到patientID、recordType等普通字段
  console.log(req.file) // 此处可拿到上传的文件对象，包含buffer、文件大小、文件名等信息
  // 后续使用req.file.buffer上传到S3即可
}

如果你使用的是其他服务端框架，替换为对应框架解析multipart/form-data的工具即可。

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