Firebase 存儲上傳 img 不起作用 -> 索引 0 處的“put”中的參數無效：預期的 Blob 或文件

Question

我第一次嘗試使用firebase存儲。 我的目標是將 img 上傳到存儲。

控制台顯示此錯誤：

“Firebase 存儲：索引 0 處的參數無效：預期的 Blob 或文件。”，serverResponse_： put ，name_：“FirebaseError”}

 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!'); });

即使這樣，我也不知道如何設置它。

Answer 1

通過快速檢查文件輸入標簽上的 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} />