javascript - React Native 多图像

标签 javascript firebase react-native firebase-storage

你能给我看一下上传多张图片的源代码吗?我尝试将多个图像上传到我的 firebase 。因此,我使用 react-native-image-crop picker 来选择图像,然后使用 react native-fetch-blob 在上传到 firebase 之前转换图像。选择图像后,我循环数组,然后转换为在循环内获取 blob。但有时它可以工作,但有时图像网址为空。希望我能在这里找到答案

最佳答案

试试这个:

const uploadImages = (photos) => {
  const uploadImagePromises = _.map(photos, (p, index) => uploadImage({ uri: p, imageName: "image_" + index }))
  const urls = await Promise.all(uploadImagePromises)
  console.log(urls);
}


const uploadImage = ({ uri, imageName }) => {
  const Blob = RNFetchBlob.polyfill.Blob
  const fs = RNFetchBlob.fs
  window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
  window.Blob = Blob
  const mime = 'image/jpg'
  return new Promise((resolve, reject) => {
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri
    let uploadBlob = null
    const imageRef = firebase.storage().ref('/images/').child(imageName)
    fs.readFile(uploadUri, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
      })
      .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        resolve(imageRef.getDownloadURL())
      })
      .catch(error => {
        console.log("error", error);
        reject()
      })
  })
}

关于javascript - React Native 多图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46931557/

相关文章:

javascript - 为什么这个select在触发JS时会额外添加一个空选项?

javascript - 在 Angular 2 中使用 Typescript 将对象适合应用于元素

firebase - 用户属性的条件不会影响 Firebase 的远程配置

firebase - Flutter Firebase cloud_functions 包抛出错误 : INTERNAL

javascript - 创建新用户 firebase

javascript - 如何在 Javascript/ReactJs/React Native 中动态导入模块

react-native - 错误 : Cannot find module 'source-map-support'

javascript - 测试 Backbone 事件哈希

javascript - ant-design select 样式不正确

react-native - 如何将 React Native Fontsize 设置为 pt?