javascript - 仅使用输入字段上传文件 - React Hook Form

Question

我是我的应用程序，我有一个文件输入来提交文件并将其发送到 Firebase 存储桶。我正在为这个任务使用 react-hook-form 库。问题是，我想通过只有输入元素来上传文件，我不想有一个按钮来提交它。这都与样式有关，我可以制作一个提交按钮，它肯定会起作用。我看到一个视频，作者展示了如何创建这个功能，甚至将它与 firebase 集成，但他有一个提交按钮
这就是我他是如何做到的

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm() 

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input ref={register} type="file" name="picture" />
      <button>Submit</button>
    </form>
  );
}

export default App;

要查看 firebase 实现，您可以查看 link

Answer 1

您基本上必须在输入的 onChange 中上传文件处理程序而不是表单的 onSubmit .代码应如下所示:

function App() {
  const onChange = (e) => {
    const storageRef = app.storage().ref();
    const fileRef = storageRef.child(e.target.files[0].name);
    fileRef
      .put(e.target.files[0])
      .then(() => {
        console.log('Uploaded a file');
      });
  }

  return (
    <form>
      <input type="file" onChange={onChange} />
    </form>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))