上传到firebase存储返回TypeError：网络请求失败

Question

我正在尝试使用此代码将图像上传到我的 firebase 存储

 async function uploadData() {
  console.log('good job')
  const randomName = Math.random().toString(36)
  const uri = image;

  setUploading(true)
   console.log(image)
  
  const childPath = firebase.storage().ref().child('drivers').child('truck').child(randomName)
  const response = await fetch(image)
  const blob = await response.blob()
  const task = childPath.put(blob, { contentType: 'image/jpeg'})

  const taskProgress = snapshot => {
    //setUploading = true
    console.log('transferred: ', snapshot )
  }
  const taskCompleted = () => {
   task.snapshot.ref.getDownloadURL().then((snapshot) => {

    saveToFireStore(snapshot)
      console.log(snapshot)
    })
  }
  const taskError = snapshot => {
   // setUploading(false)
    Alert.alert(
      "",
      snapshot,
      [
        
        { text: "OK", onPress: () => setUploading(false) }
      ])
    console.log(snapshot)
  }
  task.on("state_changed", taskProgress, taskError, taskCompleted)
}

但它返回此错误

TypeError: Network request failed

，起初我以为我的互联网连接不好，因此是原因，但我测试了我的互联网，似乎可以在线上传数据，这就是为什么我觉得这是一个代码问题。也许 firebase 做了一些我不知道的更改，或者我做错了什么。

Answer 1

错误 TypeError: Network request failed 是网络请求无法完成时发生的一般 JavaScript 错误。以下是在将图像上传到 Firebase Storage 时排查和解决此问题的一些步骤：

1. 验证 URI： 确保 uri 变量包含图像的有效 URL。 在获取之前将 uri 记录到控制台，以确保它符合您的预期。

console.log(uri);

2. 网络权限：

如果您在移动设备上进行测试，请确保您在应用清单中设置了网络权限。

3. Firebase 存储规则：

验证您的 Firebase 存储规则以确保它们允许您尝试的操作。

service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
  allow read, write;
    }
  }
}

一旦发现问题，请记住恢复到安全规则。

4. CORS 配置：

如果从 Web 浏览器运行，请确保您的 Firebase 存储 CORS 配置允许来自您的域的请求。

5. 互联网连接：

检查您的互联网连接是否稳定，然后重试。

6. Firebase SDK 版本：

确保您使用的是最新版本的 Firebase SDK。

npm install firebase@latest

7. 增强的错误处理：

更新错误处理以记录有关错误的更多信息。

const taskError = snapshot => {
  console.log(snapshot.message);
  Alert.alert("", snapshot.message, [{ text: "OK", onPress: () => setUploading(false) }]);
}

8. 控制台错误：

检查控制台是否有任何其他错误或警告，可能会提供更多信息。

9. 不同环境测试：

在不同的设备或网络上测试上传，看看问题是否仍然存在。