Question

我正在开发一个带有firebase存储的小型React Native POC，用户可以在其中选择图像并将其上传到/uid/目录下的firebase存储中。我正在使用react-native-firebase在应用程序中使用Firebase。

我拥有要使用uri创建其blob，然后尝试将blob上传到firebase的图像的RNFetchBlob。

这是处理Blob制作和上传的代码。

handleUploadTask = (mime = 'application/octet-stream') => {
    const {imageSource} = this.state;
    this.setState({uploading: true});

    const Blob = RNFetchBlob.polyfill.Blob;
    const fs = RNFetchBlob.fs;

    fs.readFile(imageSource.uri, 'base64')
        .then((data) => {
            return Blob.build(data, { type: `${mime};BASE64` })
        }).then(blob => {
            console.log('going to upload');
            this.uploadBlobToFirebase(blob);
        }).catch(error => {
            console.error('fs error:', error);
        })
}

这是uploadBlobToFirebase

uploadBlobToFirebase = (blob) => {
    const currentUserId = firebase.auth().currentUser.uid;
    const path = `/${currentUserId}/`;
    const unsubscribe = firebase.storage().ref(path).putFile(blob).on(
        firebase.storage.TaskEvent.STATE_CHANGED,
        (snapshot) => {
        const  progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        //restricting progress to be shown with only 0,2,4,... 98, 100.
        if (progress % 2 == 0) {
            this.setState({
                uploadProgress: progress
            })
        }

        if (snapshot.state === firebase.storage.TaskState.SUCCESS) {
            this.setState({
                uploading: false,
            }, () => {
                //TODO: should also add this image to flatlist.
                //Get download url and set to image in flatlist.
                Alert.alert('Upload completed');
            })

          }
        },
        (error) => {
            this.setState({
                uploading: false,
            }, ()=>{
                unsubscribe();
                console.error(error);
            })
        },
      ); 
}

函数handleUploadTask在上载按钮的onPress上被调用，并且可以正常运行到console.log('going to upload')，然后以错误结束捕获：

'fs error：'，{[TypeError：未定义不是函数（评估'filePath.replace（'file：//'，''）'）]] 线：115903，栏：41， sourceURL：'http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false'}

我在这里完全空白。找不到引起问题的file.replace和原因。任何帮助，将不胜感激。谢谢。

Answer 1

putFile需要本地存储上文件的字符串路径。

您需要将blob保存到设备上临时存储区中的文件中，然后通过putFile方法向该临时文件提供路径。

React Native Firebase确实提供了一些静态信息，可以帮助您找到设备上的某些目录，例如临时目录通过firebase.storage.Native.TEMPORARY_DIRECTORY_PATH定位的位置。有关这些文档，请参见here。

之所以这样设计，是因为与将所有内容保持为原生相比，通过React Native桥接器传输文件/ blob将对性能产生重大影响。

根据您的示例代码，您应该能够执行以下操作；

firebase.storage().ref(path).putFile(imageSource.uri).on(/* ... */);

带有putFile示例的参考文档位于：https://rnfirebase.io/docs/v5.x.x/storage/reference/Reference#putFile

在将Blob上传到Firebase存储中时，获取：TypeError：undefined不是一个函数（评估'filePath.replace（'file：//'，''）'）

1 个答案: