![](/img/trans.png)
[英]Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File
[英]Firebase Storage: Invalid argument in `put` Expected Blob or File
我正在學習教程並嘗試使用網絡攝像頭作為 jpeg 捕獲圖像,我想將其上傳到 firebase 存儲,在那里它要求我將其上傳為文件或 blob。 當我使用<input type = 'file'>
格式時,我可以上傳圖像,但我想直接從網絡攝像頭捕獲上傳圖像。 無論如何將jpeg轉換為文件或blob?
這是代碼
import React, { useState } from 'react'
import Webcam from 'react-webcam'
import firebase from 'firebase'
const WebcamComponent = () => <Webcam/>
const videoConstraints = {
width: 220,
height: 200,
facingMode: 'user'
}
const WebcamCapture = () => {
const webcamRef = React.useRef(null)
const [image, setImage] = useState('')
const capture = React.useCallback(
() => {
const imageSrc = webcamRef.current.getScreenshot()
setImage(imageSrc)
const file = image
var storage = firebase.storage()
storage.ref('FormPhotos/' + file.name).put(file).on('state_changed', alert('success'), alert)
console.log(image)
},
[webcamRef]
)
return (
<div className = 'webcam-container'>
<div className = 'webcam-img'>
{
image == '' ? <Webcam
audio = {false}
height = {200}
ref = {webcamRef}
screenshotFormat = 'image/jpeg'
width = {220}
videoConstraints = {videoConstraints}
/> : <img src = {image}/>}
</div>
<div>
{
image != ''
? <button onClick = {(e) => {
e.preventDefault()
setImage('')
}} className = 'webcam-btn'>
Retake Image
</button>
: <button onClick = {(e) => {
e.preventDefault()
capture()
}}>Capture</button>
}
</div>
</div>
)
}
export default WebcamCapture
getScreenshot()
方法返回當前網絡攝像頭圖像的 base64 編碼字符串。 使用putString
方法,而不是put
並傳遞imageSrc
在它:
const imageSrc = webcamRef.current.getScreenshot()
const base64String = imageSrc.split(',')[1]
var storage = firebase.storage()
storage
.ref('FormPhotos/' + file.name)
.putString(base64string, "base64", {contentType: 'image/jpeg'})
.then(() => {
console.log("Image uploaded")
}).catch((e) => console.log(e))
從文檔中,
如果未指定 contentType 元數據且文件沒有文件擴展名,則 Cloud Storage 默認為類型 application/octet-stream。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.