如何输入文件上传的输入引用

Question

我正在尝试输入输入的 ref，但不确定如何输入。我用它来上传文件。知道如何输入这个吗？

const ProfileLayout: React.FC = ({ children }) => {

  let inputUpdateAvatarPhoto = useRef();

.
.
.
.

 const handleImageChange = async (e: any) => {
   const formData = new FormData();
        
   formData.append('avatar', inputUpdateAvatarPhoto.files[0]);
    
.
.
.
.

    <input
      id="avatar"
      accept="image/*"
      type="file"
      ref={input => (inputUpdateAvatarPhoto = input)}
      onInput={e => {
      handleImageChange(e);
      }}
    />

Answer 1

修复你的参考

您的裁判有很多问题：

• useRef您需要通过在like上设置泛型来声明 ref 的类型useRef<HTMLInputElement>。
• React 希望 DOM 元素 ref 的初始值null不是undefined。
• 您将ref 对象语法与回调 ref 语法混淆了。使用 ref 对象，您只需将整个对象传递给 DOM 元素，例如ref={inputUpdateAvatarPhoto}
• 为了访问 ref 对象的当前值，您需要查看.current属性

这段代码应该可以工作，但是下一个代码更好

const ProfileLayoutV1: React.FC = ({ children }) => {
  const inputUpdateAvatarPhoto = useRef<HTMLInputElement>(null);

  const handleImageChange = async (e: React.FormEvent<HTMLInputElement>) => {
    const files = inputUpdateAvatarPhoto.current?.files;
    // make sure that it's not null or undefined
    if (files) {
      const formData = new FormData();
      formData.append("avatar", files[0]);
    }
    // need to set something
  };

  return (
    <input
      id="avatar"
      accept="image/*"
      type="file"
      ref={inputUpdateAvatarPhoto}
      onInput={(e) => {
        handleImageChange(e);
      }}
    />
  );
};

你不需要参考

看看你的handleImageChange函数如何获取事件e，但不使用它？ inputUpdateAvatarPhoto.current是相同的e.currentTarget！

实际上，我们甚至不需要处理程序input，因为您可以获得FormData整个表单的对象！查看 MDN 文档中的示例：使用 FormData 对象发送文件。

我们想要设置 的name属性，input因为它用于确定其在FormData对象中的键。

const ProfileLayoutV2: React.FC = ({ children }) => {

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // prevent the page from redirecting ot reloading
    e.preventDefault();
    // get the `FormData` for the whole form
    const formData = new FormData(e.currentTarget);
    // logs a `File` object
    console.log(formData.get("avatar"));
  };

  return (
    <form name="profile_form" onSubmit={handleSubmit}>
      <input
        id="avatar"
        name="avatar"
        accept="image/*"
        type="file"
      />
      <button type="submit">Submit</button>
    </form>
  );
};

请注意，如果您想File直接使用，则需要检查它是否已定义。

const avatar = formData.get("avatar"); // type is `string | File | null`
if ( avatar instanceof File ) {
  console.log("we have a file", avatar); // type is now just `File`
}