reactjs - 如何输入文件上传的输入参考

Question

我正在尝试输入此参考作为输入，但我不知道。我用它来上传文件。关于如何输入这个的任何想法？

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);
      }}
    />

标签： reactjstypescript

Answer 1

修复你的参考

你的裁判有很多问题：

• 您需要通过在useReflike上设置泛型来声明 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`
}