Question

var storageRef = firebase.storage().ref('images');
let uuid = uuidv1();
var uploadTask = storageRef.child(`${uuid}`).putString(imageUrl, 'base64', {contentType:'image/jpg'});

代码将生成基于时间的UUID作为文件名，imageUrl是用户上传的base64图像文件。我使用react-native-photo-upload来编写上传功能。然后在firebase中，我收到了这样一个文件： image

图像本身是23.4KB，但我在firebase中收到的内容要大得多。我如何从react-native-photo-upload获取文件类型的图像？ onPhotoSelect仅返回base64图像。

Answer 1

如果是图片网址，则无需添加data:image/jpeg;base64。您可以使用<Image source={{uri: image_url}} />

Answer 2

问题在于代码的这一部分：

return (<Image source={{ uri: "data:image/jpeg;base64," + image_url }} />)

本机的Image组件只支持渲染图像的这些方式：

首先，本地图像（即在项目文件夹中）：

<Image source={require('...')} />

第二，图像数据（即base64数据，你已经拥有数据）

<Image source={{ uri: 'data:image/jpg;base64,vncowi342r27yvb...' }} />

第三，用户手机上的本地图像

<Image source={{ uri: 'file://...' }} />

第四，远程图像（即下载URL）

<Image source={{ url: 'https://...' }} />

您渲染图像的方式不符合任何模式，因为对于2，您必须已经拥有数据才能渲染图像。所以，这里有两种解决问题的方法

方法1，如果您不想改变上传图片的方式（我建议您反对，只是因为那里有更多的工作，你会明白为什么），那么，你应该有一个名为imageData的状态，它保存您要渲染的图像的base64数据，然后将数据传递给它，只要您从firebase中获取它就像这样：

state = {
    imageData: '',
    ...
    ...
}

componentDidMount() {
    fetchImage()
}

fetchImage() {
    var gsReference = storage.refFromURL('gs://SOME_ADDRESS')
    gsReference.getDownloadURL()
        .then((url) => { return fetch(url) })    // Use react native's fetch API
        .then((response) => { return response.json() })
        .then((data) => this.setState({ imageData: data }))
}

render() {
    const { imageData } = this.state

    return (
        <View>
            {imageData !== '' && <Image
                source={{ uri: 'data:image/jpeg;base64,' + imageData }}
            />}
        </View>
    )
}

方法2：使用react-native-fetch-blob模块

将图像上传为blob

import RNFetchBlob from 'react-native-fetch-blob';    

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

// Upload method
// 'path' is the path of the image you want to upload, for example, it
// could look like this: 'file://...', i.e. an image picked from user's phone
function uploadImage(path) {
    let imageFile = RNFetchBlob.wrap(path);
    const imageRef = firebase.storage().ref('.../.../.../')
    let uploadBlob = null

    Blob.build(imageFile, { type: 'image/jpg' })
        .then((imageBlob) => {
            uploadBlob = imageBlob;
            return imageRef.put(imageBlob, { contentType: 'image/jpg' });
        })
        .then(() => {
            uploadBlob.close();
            return imageRef.getDownloadUrl()
        })
        .then((url) => {
            // Do something with the url, e.g. store it in database
        })
        .catch(() => { ... });
}

一旦您将图像上传为blob，就可以了，将图像呈现为：

<Image source={{ uri: '<url>' }} />

Answer 3

第1步： 初始化Firebase存储设置

第2步：请遵循以下代码

handleSubmit = (imageFile) => {
const imageUpload = storage.ref(`images/${imageFile.name}`).put(imageFile);
imageUpload.on(
  'state_changed',
  (snapshot) => {
    //process fun here  
      console.log(snapshot);
    }
  },
  (error) => {
     //error fun here 
      console.log(error);       
    }
  },
  () => {
    storage
      .ref('images')
      .child(imageFile.name)
      .getDownloadURL()
      .then((url) => {
        console.log(url);            
      });
    }
   );
 };

返回网址是我们的图片网址

如何将图像文件上传到firebase

3 个答案: