React + Redux + Firebase简单文件上传

Question

我正在尝试使用react redux和firebase上传文件，但是我被卡住了。这是我的代码：

const Input = (props) => (
  <input type="file" name="file-input" multiple {...props} />
)

function ProjectPage() {
  const { projectId } = useParams()
  const classes = useStyles()
  const firebase = useFirebase()

  var fileInput = [];

  const onSubmit = (e) => {
    e.preventDefault()
    console.log(fileInput[0])
    const storageRef = firebase.storage().ref()
    const fileRef = storageRef.child(fileInput[0])
    return fileRef
      .then(snap => console.log('upload successful', snap))
      .catch(err => console.error('error uploading file', err))
  }

  const onChange = (e) => {
    fileInput = e.target.files
  }

  // Create listener for projects
  useFirebaseConnect(() => [{ path: `projects/${projectId}` }])

  // Get projects from redux state
  const project = useSelector(({ firebase: { data } }) => {
    return data.projects && data.projects[projectId]
  })


    return (
   <div className={classes.root}>
    <form className="form" onSubmit={onSubmit}>
    <div>
      <Input onChange={onChange} />
      <button type="submit">Submit</button>
    </div>
   </form>

  </div>
  )
}

这里是我得到的错误和控制台日志。console.log(fileInput[0])IMAGE

我发现这可能是因为我需要在此处"storageRef.child(fileInput[0])"添加文件路径，但我只是不知道该怎么做。

Answer 1

从Firebase API子方法只能接收string，这是从该位置到所需子位置的相对路径。

它返回对孩子在Firebase存储器中位置的引用。您看到的控制台错误告诉我们，传递给子级的参数不是string。

在您的情况下，您正在将文件对象设置为文件名。具体来说，尝试将storageRef.child(fileInput[0])更改为storageRef.child(fileInput[0].name).put(fileInput[0])。参见full example.

让我知道是否能提供更多帮助。