react-hook-form配合Material UI文件上传提交未返回FileList实例问题

• 原生<input type="file">的选中文件存储在event.target.files属性（类数组的FileList实例），默认展开field参数只会绑定输入框的value属性，该属性仅返回单个文件的虚假本地路径字符串，不会同步文件列表数据
• 原代码defaultValue设置为空字符串，与多文件场景下的数组/FileList类型不匹配

修改Controller的配置，手动处理文件选择事件，提取FileList实例更新表单值即可：

<Controller
  name='attachments'
  control={control}
  defaultValue={[]} // 多文件场景默认值设为空数组，单文件可设为null
  render={({ field }) => (
    <input
      type='file'
      multiple
      onChange={(e) => {
        // 可直接传入e.target.files保留FileList格式，也可转为数组方便后续遍历操作
        field.onChange(Array.from(e.target.files || []))
      }}
    />
  )}
/>

如果是使用Material UI封装的上传组件，只需在组件的文件选择回调中拿到选中的File/FileList数据，调用field.onChange()传入即可，逻辑完全一致。

提交表单时即可从attachments字段拿到完整的File对象集合，可直接用于FormData上传等后续操作。

内容的提问来源于stack exchange，提问作者B. Fateh