使用Axios发送POST请求上传图片时图片转字符串且损坏的问题排查求助

嘿，我一眼就看出问题出在哪了——你没有把实际的File对象传给FormData，反而传了URL.createObjectURL()生成的Blob URL字符串，这就导致后端收到的不是二进制图片文件，而是一串文本，自然会损坏。

具体原因拆解 #

• 在你的MultiImageUpload组件里，你把选中的本地文件转成了预览用的Blob URL（格式类似blob:http://xxx/xxxx），然后把这个URL存在了父组件的image状态里。
• 当你在AdsPost里把这些URL append到FormData时，Axios会把它们当作普通字符串发送，完全不是后端期望的二进制文件。
• Postman能正常上传是因为你直接选了本地文件，传递的是原始File对象，和你代码里的逻辑根本不是一回事。

分步修复方案 #

1. 改造MultiImageUpload：同时保存File对象和预览URL

我们需要区分“用于预览的URL”和“用于上传的File对象”，不能混为一谈：

export const MultiImageUpload = ({ setImage }) => { 
  // 存包含File对象和预览URL的数组，兼顾预览和上传需求
  const [selectedImages, setSelectedImages] = useState([]); 

  const onSelectFile = (event) => { 
    const selectedFiles = event.target.files; 
    const selectedFilesArray = Array.from(selectedFiles); 
    // 生成同时包含File和预览URL的对象数组
    const imagesArray = selectedFilesArray.map((file) => ({
      file,
      previewUrl: URL.createObjectURL(file)
    })); 
    // 更新本地预览状态
    setSelectedImages(prev => [...prev, ...imagesArray]); 
    // 只把原始File对象传给父组件，用于后续上传
    setImage(prev => [...prev, ...selectedFilesArray]); 
    // 重置input，解决Chrome重复选同一张文件不触发onChange的问题
    event.target.value = ""; 
  }; 

  const deleteHandler = (imageItem) => { 
    // 移除预览项
    setSelectedImages(prev => prev.filter(item => item !== imageItem)); 
    // 移除对应的File对象
    setImage(prev => prev.filter(file => file !== imageItem.file)); 
    // 释放Blob URL内存，避免泄漏
    URL.revokeObjectURL(imageItem.previewUrl); 
  };

  // 别忘了返回预览的JSX（你之前的代码里漏了这部分）
  return (
    <div>
      <input type="file" multiple onChange={onSelectFile} />
      {selectedImages.map((item, idx) => (
        <div key={idx} style={{ margin: "10px 0" }}>
          <img src={item.previewUrl} alt="图片预览" style={{ width: "100px", height: "100px", objectFit: "cover" }} />
          <button onClick={() => deleteHandler(item)} style={{ marginLeft: "10px" }}>删除</button>
        </div>
      ))}
    </div>
  );
};

2. 调整AdsPost组件：正确上传File对象

现在父组件的images状态里存的是原始File对象，直接append到FormData就行：

const AdsPost = () => { 
  const [images, setImages] = useState([]); 
  // 注意：不要手动设置multipart/form-data的边界，Axios会自动处理
  const headers = {
    // 如果需要身份验证，这里加Authorization: `Bearer ${你的token}`
  };

  const submitAds = async () => {
    const formData = new FormData(); 
    images.forEach(file => { 
      formData.append("files", file); 
      console.log("待上传文件:", file); 
    }); 
    try {
      const res = await axios.post("你的上传接口URL", formData, { headers });
      console.log("上传成功:", res);
      // 这里可以加上传成功后的逻辑，比如重置表单
    } catch (err) {
      console.error("上传失败:", err.response?.data || err.message);
    }
  };

  return (
    <div>
      <MultiImageUpload setImage={setImages} />
      <button onClick={submitAds} style={{ marginTop: "20px" }}>提交广告</button>
    </div>
  );
};

额外提醒 #

• 不要手动指定Content-Type: multipart/form-data，Axios会自动根据FormData生成正确的请求头（包括边界值），手动设置反而容易出错。
• 确保你的后端接口支持接收files字段的多文件上传（比如Node.js用multer，Java用MultipartFile数组）。
• 一定要在删除图片或组件卸载时调用URL.revokeObjectURL()，避免内存泄漏。

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