Postman请求正常但React+Node+Cloudinary上传图片后URL为空如何解决

问题根因 #

• 当前生效的提交逻辑是将表单字段组装为普通JSON对象提交，你的后端使用multer中间件，仅支持解析multipart/form-data格式的请求，无法识别JSON格式请求中的文件字段，导致req.file始终为空，最终avatar字段被赋值为空字符串。
• 即便你之前尝试过使用FormData提交，请求代码中硬写了Content-Type: application/json头，且主动对body做了JSON序列化，会导致FormData失效。同时FormData提交时不能手动指定Content-Type头，需要浏览器自动生成带boundary的头信息，multer才能正常解析。

修复步骤 #

1. 调整React组件的表单组装逻辑 #

取消普通对象的组装逻辑，启用FormData，注意要正确获取文件对象：

const submitForm = async (e) => {
  e.preventDefault();
  const { type, name, age, avatar, sex, breed, size, isVaccinated, isSterilized, isDewormed, microchip, province, status } = e.target;

  const form = new FormData();
  form.append('type', type.value);
  form.append('name', name.value);
  form.append('age', age.value);
  form.append('sex', sex.value);
  form.append('breed', breed.value);
  form.append('size', size.value);
  form.append('isVaccinated', isVaccinated.value);
  form.append('isSterilized', isSterilized.value);
  form.append('isDewormed', isDewormed.value);
  form.append('microchip', microchip.value);
  form.append('province', province.value);
  form.append('status', status.value);
  // 正确获取文件对象，avatar是表单中type为file的input的name属性
  form.append('avatar', avatar.files[0]);

  try {
    const pet = await newPet(form);
    console.log('pet', pet);
  } catch (err) {
    console.log(err);
  }
}

2. 修改前端请求函数 #

删除无效的请求头，取消JSON序列化，直接传入FormData作为body：

export const newPet = async(form) => {
    const req = await fetch(newPetUrl, {
        method: "POST",
        headers: {
            Accept: "application/json",
        },
        credentials: "include",
        body: form,
    });

    const response = await req.json();

    if (!req.ok) {
        throw new Error(response.message);
    }

    return response;
};

multer会自动解析FormData里的普通字段放到req.body，所以后端控制器原有读取字段的逻辑不需要调整，可直接兼容。

3. 可选调试校验 #

可以在Cloudinary中间件的uploadToCloudinary函数开头打印req.file，确认提交后能正常拿到文件对象即可。

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