Question

我使用 Firebase 存储在我的 next.js 页面中上传文件。客户填写表格，文件将上传到 firebase 存储中。（我使用不同的数据库）

我想知道如何在此发布请求中只允许上传文件。

import React, { useState } from "react";
import { render } from "react-dom";
import { storage } from "../src/firebase/index";

const ReactFirebaseFileUpload = () => {
  const [image, setImage] = useState(null);
  const [url, setUrl] = useState("");
  const [progress, setProgress] = useState(0);

  const handleChange = e => {
    if (e.target.files[0]) {
      setImage(e.target.files[0]);
    }
  };

  const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
      "state_changed",
      snapshot => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(progress);
      },
      error => {
        console.log(error);
      },
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then(url => {
            setUrl(url);
          });
      }
    );
  };

  return (
    <div>
      <progress value={progress} max="100" />
      <br />
      <br />
      <input type="file" onChange={handleChange} />
      <button onClick={handleUpload}>Upload</button>
      <br />
      {url}
      <br />
      <img src={url || "http://via.placeholder.com/300"} alt="firebase-image" />
    </div>
  );

}

export default ReactFirebaseFileUpload;

这是我使用开放规则的工作示例。

我的规则：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

我想把上传放在next.js api路由系统上，所以我们有一个api可以调用。在我的想象中，我可以以某种方式保护这部分，然后使用标题或其他东西，或者甚至可以更好地在我的存储规则中定义一些东西。

我真的没有找到任何明智的定义。

请帮我指导扔这个。

Answer 1

如果有人（未经身份验证）需要上传数据，您需要授予他 write 访问您存储中特定 path 的权限。

要从该 donwloadURL 获取 ref，它需要 read 权限。

如果根据您的业务逻辑，任何人都可以上传但不需要 downloadURL，您可以为每个人删除 read。

我绝对建议在特定的 path 下上传此类文件，例如“public”，并至少对图像进行文件大小和 contentType 等限制：

match /public/{allPaths=**} {
        allow read: if true
        allow write: if request.resource.size < 15 * 1024 * 1024
                    && request.resource.contentType.matches('image/.*') 
    }

不要忘记 downloadURL 是每个文件的公共访问 URL。因此，拥有该 URL 的任何人都可以访问该文件。您需要 read 规则才能从引用中获取 downloadURL，但如果您从其他地方获取 downloadURL，您仍然可以访问该文件。它们的制作方式不容易引起问题，因此这是一种非常安全的方法。

如果可以，您可以使用管理 SDK 自行完成，只需返回 downloadURL 或使用带有存储触发器的 Firebase Cloud Functions 来侦听文件上传（具有上述限制访问权限）并存储downloadURL 在您需要的地方。

Here 你很好地解释了所有这些是如何协同工作的。

如何在不使用 Firebase 身份验证的情况下保护 Firebase 存储？ (nextjs)

1 个答案: