Reactjs 为什么我的react应用程序中没有获取firebase存储文件url？

在我的React应用程序中，我有三个连接到firebase的主要功能。firebase身份验证、实时聊天和第三个需要firebase存储。我想上传带有聊天信息的图像。 当我尝试上载图像时，当我尝试

console.log（url）

我想获取下载的图像url并将其存储在firestore数据库中，然后在

Message.js

组件中使用该url。

My Chat.js组件

  const [messages, setMessages] = useState([]);
  const [assets, setAssets] = useState(null);

  useEffect(() => {
    if (channelId) {
      db.collection("channels")
        .doc(channelId)
        .collection("messages")
        .orderBy("timestamp", "desc")
        .onSnapshot((snapshot) => {
          setMessages(snapshot.docs.map((doc) => doc.data()));
        });
    }
  }, [channelId]);

  const sendMessage = (e) => {
    e.preventDefault();
    const uploadTask = storage.ref(`assets_discord/${assets.name}`).put(assets);
    uploadTask.on("state_changed", () => { 
      storage
        .ref("assetsdiscord")
        .child(assets.name)
        .getDownloadURL()
        .then((url) => {
          db.collection("assetUrl").add({
            imgUrl: url,
          });
          console.log(url);
          setAssets(null);
        });
      });
      db.collection("channels").doc(channelId).collection("messages").add({
        user: user,
        message: input,
        timestamp: firebase.firestore.FieldValue.serverTimestamp(),
      });
      
    setInput("");
  };

  const hideInput = (e) => {
    e.preventDefault();
    setShowInput(!showInput);
  };

  return (
    <div className="chat">
      {channelId ? (
        <>
          <ChatHeader channelName={channelName} />
          <div className="chat__messages">
            {messages.map((message) => (
              <Message
                user={message.user}
                message={message.message}
                timestamp={message.timestamp}
                assetUrl={message.imgUrl}
              />
            ))}
          </div>
          <div className="chat__input">
            {showInput ? (
              <>
                <form action="#">
                  <label htmlFor="imgFiles" className="upload__img">
                    <AddCircle fontSize="large" />
                  </label>
                  <input
                    type="file"
                    id="imgFiles"
                    className="hidden"
                    accept="image/*"
                    onChange={(e) => {
                      if (e.target.files[0]) {
                        setAssets(e.target.files[0]);
                      }
                    }}
                  />
                  <input
                    disabled={!channelId}
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    type="text"
                    placeholder={`Send Message to #${channelName}`}
                  />
                  <button
                    onClick={sendMessage}
                    className="chat__inputButton"
                    type="Submit"
                  >
                    Send Message
                  </button>
                  <button onClick={hideInput}>Hide</button>
                </form>
              </>
            ) : (
              <p
                onClick={() => setShowInput(!showInput)}
                className="show__input"
              >
                Show
              </p>
            )}
          </div>
        </>
      ) : (
        <>
          <div className="chat__selectRoom">
            <ArrowLeftIcon
              style={{ fontSize: "30px" }}
              className="arrow__left"
            />
            <h3>Select Any Room to get Started</h3>
          </div>
        </>
      )}
    </div>
  );

---

转到firebase控制台，然后选择您正在处理的项目，然后转到存储，然后选择规则

如果您正在使用firestore或数据库，请检查规则。另一个问题可能是您没有添加项目的SHA。我们允许每个人更改存储方式，以供公众访问

在您的情况下，正如您所评论的，问题可能是安全访问。

我建议您在使用任何平台（如AmazonAWS、firebase或任何类型的API）之前阅读文档

---

另一个检查-检查文件的地址，我重新检查了错误。您的安全规则是正确的，我认为您应该使用文档中的一些示例。

如果文件地址错误，请检查文件地址。如果确定该文件不存在，请检查从api获取的url。是的，当我单击firebase api url时，说明文件不存在，我获取api的url也托管在firebase上，但我使用netlify链接进行生产。你是说我应该检查我的firebase url？是的，检查你获得的url并手动下载文件。至少你可以知道问题出在哪里，在firebase规则或你的代码中。我访问了控制台错误url，但它向我显示了这个对象：{“错误”：{“代码”：403，“消息”：“权限被拒绝。无法执行此操作”}}我不明白出了什么问题？我们知道了，问题出在firebase规则中。谷歌提供了安全规则，我们可以通过这些规则控制人们访问我们的firebase存储。我发布了一个答案，请检查它。谢谢你的答案，我改变了存储规则，但现在我上传的图像显示错误代码404，而不是403。未捕获（承诺中）Firebase错误：Firebase存储：对象“AssetDiscord/Screenshot（226）.png）”不存在。（存储/对象未找到）{“错误”：{“代码”：404，“消息”：“未找到。无法获取对象”，“状态”：“获取对象”}我检查了图像api的链接，它是这样的：也许我的react应用程序有问题？你的应用程序和firebase服务器没有问题，你应该冷静和耐心。请看，它是说找不到对象（我不知道javascript，因为我是android开发人员），但在java中，这意味着StorageReference没有初始化。根据错误，可能有两个错误，一个是对象有问题，另一个是文件的位置（要上载的文件或要上载的位置）不正确。耐心点，一步一步地看，错误在哪里。谢谢Vijay的帮助，我会看一看。

const Message = ({ user, timestamp, message, assetUrl }) => {
  // console.log(assetUrl);
  return (
    <div className="message">
      <Avatar src={user.photo} />
      <div className="message__info">
        <h4>
          {user.displayName}
          <span className="message__timestamp">
            {new Date(timestamp?.toDate()).toUTCString()}
          </span>
        </h4>
        <p>{message}</p>
        {/*
         <ImageUpload assetUrl={assetUrl} /> 
       */}
        <img src={assetUrl} alt="dummy" />
      </div>
    </div>
  );
};

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}