在 React Native 中将图像上传到 Firebase 存储时出现错误 400 Bad Request

Posted 2023-03-22

【中文标题】在 React Native 中将图像上传到 Firebase 存储时出现错误 400 Bad Request

【英文标题】：Error 400 Bad Request while Uploading Image to firebase storage in React Native

【发布时间】：2021-07-30 20:54:37

【问题描述】：

我正在处理连接到 firebase 的 react 本机项目。我正在 =using firebase storage ad=nd 尝试将文件上传到 firebase 存储但我收到以下错误。

code: 400, message: "Bad Request. Could not access bucket quickbuy-a0764.appspot.com","status":"Access_Bucket"

我尝试配置我的权限，但对我不起作用。 我提供给 put() 的 Image Uri 示例如下

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAk 等

现在我应该怎么做才能解决这个问题？

let filename = values.images + Date.now();
let uri = values.images[0];
const uploadTask = storage.ref(`images/$filename`).put(uri);
  uploadTask.on("state_changed", (snapshot) => 
  console.log(snapshot);
);

【参考方案1】：

firebase.storage.Reference#put() 接受 Blob、Uint8Array 或 ArrayBuffer。因为您正在尝试上传数据 URI，它是一个字符串，所以您需要使用 [firebase.storage.Reference#putString()`](https://firebase.google.com/docs/reference/js/firebase.storage.Reference#putstring)。

要对数据 URI 执行此操作，您可以使用：

someStorageRef.putString(uri, firebase.storage.StringFormat.DATA_URL);

接下来，基于以下几行：

const filename = values.images + Date.now();
let uri = values.images[0];

values.images 是一个数组，这意味着filename 最终将类似于"[object Object],[object Object]1620528961143"。

正如我昨天在this answer 中就您的问题所介绍的那样，这是一种生成 ID 的糟糕方法，因为它可能导致重复和冲突 - 请改用推送 ID。

const uri = /* ... */;

const rootRef = firebase.database().ref();
const filename = rootRef.push().key;

const uploadTask = storage.ref(`images/$filename`)
  .putString(uri, firebase.storage.StringFormat.DATA_URL);
uploadTask.on("state_changed", (snapshot) => 
  console.log(snapshot);
);

【讨论】：

上传文件时出现此错误 dataURL.match 不是函数。 （在'dataURL.match(/^data:([^,]+)?,/)'中，'dataURL.match'未定义）

另一件事是当我尝试使用 const uploadTask = storage.ref(images/$filename).put(uploadUri); 上传图像时，它上传了一个文件，但使用大小为 9 字节，不可读。

听起来你的 uri 变量是一个对象，而不是一个字符串。使用.putString(String(uri), firebase.storage.StringFormat.DATA_URL)。请务必严格按照文档进行操作，否则您会遇到此类错误。

【参考方案2】：

未来使用 SDK 版本 9

import  getStorage, ref, uploadBytes  from "firebase/storage";

    const uploadImage = async (values) => 
      const filename = values.images + Date.now();
      const uri = values.images[0];
      // Create a root reference
      const storage = getStorage();
        
      // Create a reference to 'images/$filename.jpg'
      const filesImagesRef = ref(storage, 1images/$filename.jpg);
    
      await uploadBytes(filesImagesRef, uri).then((snapshot) => 
        console.log('Uploaded a blob or file!');
      );
    

让我们知道这对您有什么作用！

【讨论】：

值得注意的是，这个答案使用了 v9 Beta javascript SDK。

这个不行编译时出现很多警告

类似尝试导入错误：“getStorage”未从“firebase/storage”导出。

与 ref 和 uplaodBytes 相同。

如果您使用的是 react native，那么您最好使用 v9 或支持那里的功能。你能分享你初始化firebase的文件吗？