如何向服务器发送图片文件而非仅URL？技术求助

问题核心是后端通过upload.single('image')期望接收multipart/form-data格式的文件上传请求，但你之前传递的是图片URL（字符串），不是File对象，导致multer无法解析出req.file。

步骤1：将项目中的静态图片转换为File对象 #

浏览器无法直接读取本地项目文件，需先通过fetch获取图片资源，转换为Blob后再构造File对象：

async function getCabinImageFile() {
  // 发起请求获取图片资源
  const res = await fetch('./cabins/cabin-001.jpg');
  // 转换为Blob对象
  const blob = await res.blob();
  // 构造File对象（参数：Blob数组、文件名、文件类型）
  return new File([blob], 'cabin-001.jpg', { type: blob.type });
}

步骤2：用FormData构造请求体并发送 #

通过FormData包装表单字段和文件，axios会自动处理multipart/form-data格式：

async function createCabins() {
  try {
    const imageFile = await getCabinImageFile();
    const formData = new FormData();

    // 逐个添加cabin的其他字段
    formData.append('name', cabin.name);
    formData.append('maxCapacity', cabin.maxCapacity);
    formData.append('regularPrice', cabin.regularPrice);
    formData.append('discount', cabin.discount);
    formData.append('description', cabin.description);
    // 添加图片文件（字段名必须和后端`upload.single('image')`中的`image`一致）
    formData.append('image', imageFile);

    // 发送请求
    const response = await axios.post('http://localhost:3005/cabins', formData);
    console.log('创建成功:', response.data);
  } catch (error) {
    console.log('错误:', error.message);
  }
}

后端代码无需修改 #

你的后端路由代码已经正确处理了文件上传和字段解析，保持原样即可：

router.post('/', upload.single('image'), async (req,res)=>{
    try {
        const data = await Cabins.create({...req.body, image: req.file.path})
        res.status(200).json(data)
    } catch (error) {
        console.log(error)
        res.status(400).json(error)        
    }
})

为什么之前的方法无效？ #

• import cabin1 from './cabins/cabin-001.jpg' 或 require('./cabins/cabin-001.jpg') 在浏览器环境中得到的是图片的访问URL（开发环境可能是base64编码，生产环境是静态资源路径），不是File对象，后端multer无法将其识别为上传文件，因此req.file为undefined。

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