React+TypeScript项目使用useForm时如何获取上传文件名并正确上传AWS

问题根因 #

type="file"的原生输入框默认返回的值是FileList类型（哪怕没有开启multiple多选，也是长度为1的类数组对象），你之前的表单类型错误将avatar字段定义为File类型，实际拿到的是FileList，直接传FileList给S3上传方法会被序列化为字符串[object FileList]，导致上传的不是真实图片，同时类型不匹配也导致你拿文件名时TS报错、值为undefined。

解决方案 #

方案1：调整类型定义，提交时取单个文件 #

1. 修正表单类型：

// 注意不要和浏览器原生FormData类重名，这里改成FormValues避免冲突
type FormValues = {
  handle: string;
  role: string;
  avatar: FileList;
};

2. 提交时从FileList中取出第一个文件操作：

const onSubmit = (data: FormValues) => {
  // 先判空避免报错
  if (!data.avatar?.length) return;
  const avatarFile = data.avatar[0];
  // 可正常获取文件名
  console.log(avatarFile.name);
  // 传真实File对象到S3
  ReactS3Client.uploadFile(avatarFile, data.handle + Date.now())
    .then((res) => console.log(res))
    .catch((err) => console.error(err));
};

方案2：注册字段时直接转换为单个File（更简便） #

不需要修改提交逻辑，只需要给register加转换配置：

<div>
  <input 
    type="file" 
    {...register('avatar', {
      // 直接把FileList转换为第一个File对象
      setValueAs: (fileList: FileList) => fileList?.[0]
    })} 
  />
</div>

你原来的类型定义、onSubmit里直接取data.avatar.name、直接传data.avatar上传的逻辑都可以正常运行。

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