React组件文件上传报400错误：请求格式问题排查

核心问题分析 #

• 上传函数未传递FormData：uploadFile中创建了FormData但未作为请求体传给axios，导致后端接收不到文件。
• 参数类型冲突：参数名formData与内置FormData类型重名，引发类型错误。
• Input属性错误：Dropzone对应的input标签name和id错误设置为title，与文件上传字段不匹配。
• 分类API传参错误：添加/编辑分类时直接传递File对象给API，而非上传后的文件URL。

解决方案 #

1. 修正uploadFile函数 #

// 自定义参数类型，避免和内置FormData冲突
type UploadParams = {
  coverImgUrl: File;
};

export const uploadFile = async ({ coverImgUrl }: UploadParams) => {
  const fd = new FormData();
  fd.append("coverImgUrl", coverImgUrl);
  // 关键：将FormData作为post请求的第二个参数传递
  return await axiosClient.post("/storage/uploadFile", fd);
};

2. 修正Dropzone的Input属性 #

在模态组件的Dropzone输入框中，修正name和id属性：

<input
  {...ImageGetInputProps({
    name: "coverImgUrl",
    accept: "image/*",
  })}
  name="coverImgUrl"
  id="coverImgUrl"
  className="mt-1 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2"
  placeholder="拖拽或选择图片..."
/>

3. 调整文件上传后的状态管理 #

在onDrop中保存上传后的文件URL到formData，确保分类API能拿到正确的URL：

const onDrop = useCallback(
  async (acceptedFiles: File[]) => {
    onFileChange(acceptedFiles);
    try {
      // 调用上传接口并获取返回的URL
      const uploadRes = await uploadFile({ coverImgUrl: acceptedFiles[0] });
      // 更新formData中的coverImgUrl为上传后的URL
      setFormData(prev => ({
        ...prev,
        coverImgUrl: uploadRes.data.url // 假设后端返回的URL字段为url
      }));
      console.log("File uploaded successfully");
    } catch (error) {
      console.error("Error uploading file:", error);
    }
  },
  [onFileChange]
);

4. 修正添加/编辑分类的传参 #

确保传递给分类API的是文件URL而非File对象：

const addCategorie = async () => {
  createCategorie({
    title: formData.title,
    coverImgUrl: formData.coverImgUrl // 使用上传后的URL
  });
  setIsModalOpen(false);
};

const editCategorie = async () => {
  editCategorieMutate({
    coverImgUrl: formData.coverImgUrl,
    title: formData.title,
    id: formData.id,
  });
  setIsModalOpen(false);
};

额外优化点 #

• 移除formData状态中冗余的imageFilesAcceptedFiles[0].name，直接使用上传后的URL或编辑时的已有URL。
• 在useEffect初始化编辑状态时，确保coverImgUrl正确设置为已有图片URL。

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