上传 img 的 Firebase 存储不起作用 -> 索引 0 处的“put”中的参数无效：预期的 Blob 或文件答案

【问题标题】：Firebase Storage upload of img dont work -> Invalid argument in `put` at index 0: Expected Blob or File上传 img 的 Firebase 存储不起作用 -> 索引 0 处的“put”中的参数无效：预期的 Blob 或文件
【发布时间】：2020-08-11 02:42:13
【问题描述】：

我第一次尝试使用 Firebase 存储。我的目标是将 img 上传到存储中。

控制台显示此错误：

“Firebase 存储：put 索引 0 处的参数无效：预期的 Blob 或文件。”，serverResponse_：null，name_： “Firebase 错误”}

 export default function ImgUpload() {
  const [img, setImg] = useState([]);

  console.log('img', img);

  const handleUpload = () => {
    firebase
      .storage()
      .ref()
      .child(`images/${img.name}`)
      .put(img)
      .then(function (snapshot) {
        console.log('what');
      });
  };

  return (
    <div>
      <Input onChange={setImg} type="file" value={img} />
      <Button onClick={e => handleUpload(e)} type="submit">
        Upload
      </Button>
    </div>
  );
}

我也在文档中找到了这个：

var file = ... // use the Blob or File API 
ref.put(file).then(function(snapshot) {   
console.log('Uploaded a blob or file!'); });

即使这样，我也不知道如何设置它。

【问题讨论】：

标签： javascript reactjs firebase firebase-storage

【解决方案1】：

通过快速查看the file input tag 上的 ReactJS 文档，您可以使用this.fileInput.current.files[0] 获取实际文件。

所以这意味着它对你来说看起来像这样：

let file = this.fileInput.current.files[0];
firebase
  .storage()
  .ref()
  .child(`images/${file.name}`)
  .put(file)

在 JSX 中有这个：

<input type="file" ref={this.fileInput} />

【讨论】：