如何使用expo-image-picker向基于multer的Express.js后端上传图片

核心问题与修复步骤 #

1. 表单字段名不匹配 #

后端multer配置的是接收名为archivo的文件（upload.single("archivo")），但前端FormData里append的是file，后端找不到对应文件，直接返回400。

修复方式二选一：

• 前端修改字段名：把formData.append("file", ...)改成formData.append("archivo", ...)
• 后端修改字段名：把upload.single("archivo")改成upload.single("file")

2. Expo ImagePicker 文件内容未正确传递 #

你的前端代码只传入了文件名、类型、大小等元数据，没有传递实际的文件二进制内容。Expo中必须通过图片的uri来指定文件路径，才能让FormData正确读取文件。

修复：
修改FormData的append逻辑，使用result.assets[0]中的完整属性：

const asset = result.assets[0];
const formData = new FormData();
formData.append("archivo", {
  uri: asset.uri,
  name: asset.fileName,
  type: asset.mimeType,
});

3. 手动设置Content-Type导致解析失败 #

手动设置"Content-Type": "multipart/form-data"会覆盖FormData自动生成的带boundary的请求头，后端multer无法正确解析表单结构，触发400错误。

修复：
删除Axios请求中的headers配置，让系统自动生成正确的请求头：

axios
  .post(`http://${apiURL}:8000/api/upload`, formData)
  .then(() => console.log("archivo enviado"))
  .catch(err => console.log("Archivo no enviado", err));

4. 路由路径一致性检查 #

前端请求的是/api/upload，但后端路由是/upload，如果Express没有挂载/api前缀的路由，会导致路径不匹配（虽然你当前返回的是400，但最好确认路由一致）。

修复方式二选一：

• 前端请求地址改为http://${apiURL}:8000/upload
• 后端路由改为app.post("/api/upload", ...)

修正后的完整Expo代码示例 #

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: true,
    aspect: [4, 4],
    quality: 1,
  });

  console.log(result);

  if (!result.canceled) {
    const asset = result.assets[0];
    setImage(asset.fileName);
    console.log(asset.fileName);

    const formData = new FormData();
    formData.append("archivo", {
      uri: asset.uri,
      name: asset.fileName,
      type: asset.mimeType,
    });

    axios
      .post(`http://${apiURL}:8000/api/upload`, formData)
      .then(() => {
        console.log("archivo enviado");
      })
      .catch((err) => {
        console.log("Archivo no enviado", err);
      });
  }
};

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