React-native Firebase存储上传使用putString调用 [英] React-native Firebase storage upload using putString call

问题描述

为了说明firebase存储 putString 方法 或 是否在React-native中工作，我正在设置此线程。

从我搜索的内容来看，目前没有办法使用 put 方法将文件或Blob类型上传到Firebase存储。

React Native不支持File和Blob类型，因此Firebase存储上传在此环境中将不起作用。然而，文件下载仍然有效。

消息来源： Firebase Blog

因此，这个调用

  firebase.storage（）。ref ）
 .child（userID）
 .put（new File（['this is a small amount of data']，'sample-text.txt'，{type：text / plain}） ，{type：text / plain}）
 .then（p => {console.log（p）}）
 .catch（p => {console.log（p）} ）
  

不起作用并以响应结束

代码：存储/未知消息：Firebase存储：出现未知错误
，请检查服务器响应的错误有效负载。名称：
FirebaseError serverResponse ：多部分正文不包含2或
3个部分。

/ blockquote>

不过，使用Firebase存储putString方法可以将数据上传到Firebase存储。这与纯字符串工作。但即使我使用这种方法上传。

  firebase.storage（）
 .ref（）
 .child（userID）
 .putString（'string'）
 .then（p => {console.log（p）}）
 .catch（p => {的console.log（p）}）; 
  

从我从这个答案。 putString 方式应该起作用。

我做错了什么？这个代码在React里对我很好。每当我粘贴到React本地。它停止工作。

解决方案

我刚刚尝试 react-native-fetch-blob 之前的评论，我能够使它工作，尝试使用这个片段从索引文件：

1）课前申报：
$ b

 class = 反应天然取入斑点; 
 const Blob = RNFetchBlob.polyfill.Blob; 
 window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest; 
 window.Blob = Blob; 
  

2）在存储方法中：

  let filePath ='YOUR / FILE / PATH'; 
让fileName ='file_name.jpg'; 
让rnfbURI = RNFetchBlob.wrap（filePath）; 
 //从文件路径创建Blob 
 Blob 
 .build（rnfbURI，{type：'image / png;'}）
 .then（（blob）=> { 
 //使用Firebase SDK上传图片
 firebase.storage（）
 .ref（'images'）
 .child（fileName）
 .put（blob，{ （（snapshot）=> {
 console.log（'Uploaded'，snapshot.totalBytes，'bytes。'）; 
 console .log（snapshot.metadata）; 
 var url = snapshot.metadata.downloadURLs [0]; 
 console.log（'File available at'，url）; 
}）。catch函数（错误）{
 console.error（'上传失败：'，错误）; 
}）; 
  

I'm setting up this thread in order to clarify, whether firebase storage putString method does or does not work in React-native.

From what I've searched there is currently no way to upload File or Blob types to Firebase Storage using put method.

React Native does not support the File and Blob types, so Firebase Storage uploads will not work in this environment. File downloads do work however.

SOURCE: The Firebase Blog

Thus this call

firebase.storage().ref()
.child(userID)
.put(new File(['this is a small amount of data'], 'sample-text.txt', { type: "text/plain" }), { type: "text/plain" })
.then(p => {console.log(p)})
.catch(p => {console.log(p)})

does not work and ends up with response

code : "storage/unknown" message : "Firebase Storage: An unknown error occurred, please check the error payload for server response." name : "FirebaseError" serverResponse : "Multipart body does not contain 2 or 3 parts."

Nevertheless there is another option to upload data to Firebase Storage, using Firebase storage putString method. Which works with plain string. But even if I use this method to upload. I'm getting the same server reponse as before.

firebase.storage()
.ref()
.child(userID)
.putString('string')
.then(p => {console.log(p)})
.catch(p => {console.log(p)});

Bu from what I've learned from this answer. The putString way should work.

What am I doing wrong? The code works fine for me in React. Whenever I paste to React-native. It stops working.

解决方案

I've just tried react-native-fetch-blob as Ven commented before, and I was able to make it work, try using this snippet from the index file in the example:

1) Before class declaration:

import RNFetchBlob from 'react-native-fetch-blob';
const Blob = RNFetchBlob.polyfill.Blob;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

2) Inside the storing method:

let filePath = 'YOUR/FILE/PATH';
let fileName = 'file_name.jpg';
let rnfbURI = RNFetchBlob.wrap(filePath);
// create Blob from file path
Blob
.build(rnfbURI, { type : 'image/png;'})
.then((blob) => {
  // upload image using Firebase SDK
  firebase.storage()
    .ref('images')
    .child(fileName)
    .put(blob, { contentType : 'image/jpg' })
    .then((snapshot) => {
      console.log('Uploaded', snapshot.totalBytes, 'bytes.');
      console.log(snapshot.metadata);
      var url = snapshot.metadata.downloadURLs[0];
      console.log('File available at', url);
    }).catch(function(error) {
      console.error('Upload failed:', error);
    });

这篇关于React-native Firebase存储上传使用putString调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！