React中如何将后端图片链接绑定到file输入框并正常提交API？

问题根源 #

1. File输入框安全限制：浏览器出于安全规范，不允许通过JavaScript直接给type="file"的输入框设置远程URL作为value，你当前设置的value完全无效，输入框并未关联任何实际文件。
2. FormData提交类型错误：如果portfolioImage是URL字符串，后端接收的是文本而非文件对象，不符合后端对图片文件的验证规则，因此触发报错。

正确操作步骤 #

要实现需求，需先将远程URL对应的图片下载为File对象，再用该对象提交FormData，具体如下：

1. 编写工具函数：从URL转成File对象

async function urlToImageFile(url) {
  // 请求图片资源转为Blob
  const response = await fetch(url);
  const blob = await response.blob();
  // 从URL提取文件名（也可自定义）
  const filename = url.split('/').pop().replace(/%20/g, ' ');
  // 将Blob包装为File对象
  return new File([blob], filename, { type: blob.type });
}

2. 在组件中获取并存储File对象

当拿到后端返回的图片URL后，调用工具函数转换为File对象并存入状态：

// 假设已获取到后端返回的data对象
const portfolioImageFile = await urlToImageFile(data.image);
// 用React状态存储该File对象（示例）
setPortfolioImage(portfolioImageFile);

3. 修改提交代码

提交时使用转换后的File对象代替URL字符串：

const submitPortfolio = (e) => {
  const formData = new FormData();

  formData.append("title", values?.title);
  formData.append("description", values?.description);
  // 传入File对象而非URL字符串
  formData.append("image", portfolioImageFile);
  if (data) {
    formData.append("id", data?.id);
  }

  dispatch(onEditPortfolio(formData, onCloseModal));
};

4. 调整File输入框（可选）

因为不需要用户选择本地文件，可直接隐藏输入框，同时展示后端图片预览：

<!-- 隐藏File输入框 -->
<input
  type="file"
  id="drag_portfolio"
  name="file"
  onChange={(e) => onImageChange(e)}
  style={{ display: 'none' }}
/>
<!-- 展示后端图片预览 -->
<img src={data.image} alt="Portfolio Preview" style={{ maxWidth: '200px' }} />

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