React Hook Form中如何为type="file"输入框设置默认值并显示文件预览

嘿，我来帮你搞定这个问题！首先得明确一个关键限制：原生的<input type="file">是**不支持直接设置defaultValue或者value**的，这是浏览器的安全策略，防止脚本未经用户许可就操作本地文件。所以我们得换个思路，通过“单独展示已有文件信息+配合React Hook Form处理新文件”的方式来实现你的需求。

下面分步骤给你讲具体怎么做：

1. 先展示已有文件的预览和名称 #

既然不能给文件输入框直接设默认值，那我们可以在输入框的上方/旁边，单独渲染已有的文件信息和预览图。比如从你的englishProficiency编辑数据里取出文件名和文件的访问URL（这个URL需要后端提供，或者你根据文件名拼接成可以访问的路径）。

举个简单的渲染示例：

// 假设你的编辑数据存在这个变量里（从接口获取）
const editData = {
  englishProficiency: [
    { uploadTestResult: "104.PNG", fileUrl: "/uploads/104.PNG" }
  ]
};

// 在渲染表单的时候，先判断是否有已上传的文件
{editData.englishProficiency[index].uploadTestResult && (
  <div className="existing-file-block">
    <img 
      src={editData.englishProficiency[index].fileUrl} 
      alt="已上传文件预览" 
      style={{ width: '100px', height: '100px', objectFit: 'cover', border: '1px solid #ddd' }}
    />
    <p className="file-name-text">当前已选文件：{editData.englishProficiency[index].uploadTestResult}</p>
  </div>
)}

2. 配合React Hook Form处理新文件选择 #

接下来要和React Hook Form结合，处理用户选择新文件的场景：当用户选了新文件，我们要更新表单状态，同时生成新的预览图；如果用户没选新文件，提交时保留原文件的标识。

首先写uploadResult的 onChange 处理函数，同时用React Hook Form的setValue更新表单值：

import { useForm, setValue } from "react-hook-form";
import { useState, useEffect } from "react";

// 先在组件里定义状态存新文件的预览URL
const [previewUrls, setPreviewUrls] = useState([]);

const uploadResult = (e, index) => {
  const selectedFile = e.target.files[0];
  if (selectedFile) {
    // 1. 更新React Hook Form的表单字段值
    setValue(
      `englishProficiency.${index}.uploadTestResult`, 
      selectedFile // 这里可以存file对象，也可以只存文件名，根据后端需求调整
    );
    // 2. 生成新文件的预览URL
    const tempPreviewUrl = URL.createObjectURL(selectedFile);
    // 更新预览URL数组
    setPreviewUrls(prev => {
      const updatedUrls = [...prev];
      updatedUrls[index] = tempPreviewUrl;
      return updatedUrls;
    });
  }
};

然后渲染你的文件输入框，不需要加defaultValue，保持原生行为即可：

<TextField
  type="file"
  {...register(`englishProficiency.${index}.uploadTestResult`)}
  variant="outlined"
  onChange={(e) => uploadResult(e, index)}
/>

3. 处理表单提交的逻辑 #

提交表单时，要区分用户是否选择了新文件：如果选了，就用新文件的信息；没选的话，就沿用编辑数据里的原有文件标识（比如文件名或者后端的文件ID）。

示例提交函数：

const onSubmit = (formData) => {
  // 整理提交数据，兼容“没选新文件”的情况
  const finalSubmitData = {
    ...formData,
    englishProficiency: formData.englishProficiency.map((item, idx) => ({
      ...item,
      uploadTestResult: item.uploadTestResult 
        ? item.uploadTestResult.name // 如果是新文件，取文件名
        : editData.englishProficiency[idx].uploadTestResult // 没选新文件就用原文件名
    }))
  };
  // 这里把finalSubmitData发给后端就可以了
  console.log("提交的最终数据：", finalSubmitData);
};

4. 别忘了清理内存！ #

用URL.createObjectURL生成的预览URL会占用浏览器内存，所以一定要在组件卸载时释放掉，避免内存泄漏：

useEffect(() => {
  return () => {
    previewUrls.forEach(url => URL.revokeObjectURL(url));
  };
}, [previewUrls]);

一些小提醒 #

• 后端必须提供已上传文件的可访问URL，否则没法显示预览；如果只有文件名，你需要自己拼接成完整的访问路径（比如/uploads/${文件名}）。
• 如果你的表单需要支持多文件或者更复杂的场景，可以把预览URL的状态和编辑数据结合起来管理，逻辑会更清晰。

备注：内容来源于stack exchange，提问作者Ahsan Khan