next.js 错误:“加载失败”,试图将图像上传到supabase

jaql4c8m  于 2023-05-06  发布在  其他
关注(0)|答案(1)|浏览(159)

在我的next.js应用程序中,我试图从表单上传图像。但我一直得到一个错误:[Error] Unhandled Promise Rejection: TypeError: Load failed文件没有上传到数据库。
我通过控制台检查了image变量,它是一个File对象。下面是我如何做到这一点,我遵循了文档中的教程:

import * as Form from "@radix-ui/react-form";
import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
  "url",
  "api-key",
);

export default function Warehouses() {

  async function uploadImage(e) {
    const image = e.files[0];

    const { data, error } = await supabase.storage
      .from("images")
      .upload("/", image);

    if (data) {
      console.log(data);
    } else {
      console.log(error);
    }
  }

  const onSubmit = (event) => {
    uploadImage(event.target.images);
  };

  return (
    <div>
        <Form.Root className="FormRoot" onSubmit={onSubmit}>
          <Form.Field className="FormField" name="images">
            <div
              style={{
                display: "flex",
                alignItems: "baseline",
                justifyContent: "space-between",
              }}
            >
              <Form.Label className="FormLabel">
                Upload Images
              </Form.Label>
            </div>
            <Form.Control asChild>
              <input
                type="file"
                id="images"
                name="images"
                multiple
              />
            </Form.Control>
          </Form.Field>

          <Form.Submit asChild>
            <Button>Create</Button>
          </Form.Submit>
        </Form.Root>
    </div>
  );
}

我将感谢任何帮助!

更新

我在Safari浏览器中也得到这个错误:

[Error] Fetch API cannot load https://my-url/storage/v1/object/images/2 due to access control checks.

下面是我从console.log(image)在uploadImage()中得到的内容:

我还尝试使用以下代码检查与supabase的连接:

export async function getServerSideProps() {
  const buckets = await supabase.storage.listBuckets();
  console.log(buckets);
  
  return {
    props: {
      bucketList: buckets,
    },
  };
}

但我在控制台得到这个:``` { data:[],error:null } ``
以下是我的supabase bucket“images”的策略:

以下是第一个(选择)策略编辑窗口:

插入策略:

以下是如何将策略添加到我的bucket:

cedebl8k

cedebl8k1#

您上载文件的方式不符合您的插入策略。
问题是您有storage.foldername(name)[1] = 'public',但您没有将图像上传到public文件夹中。要通过此策略,您需要将图像上传到/public路径而不是/。我假设你在这里的意思是你正在上传一张图片到一个公共桶,但这与上传到公共路径是不同的。我认为你可以删除storage.foldername(name)[1] = 'public'语句。
此外,还有其他一些东西你也可以删除。首先,我们最近添加了一个功能来限制上传到bucket的对象的meme类型。你可以这样设置它只接受jpg。

关于角色,指定要将策略应用于哪个角色的正确方法是从策略编辑器中选择target roles。您可以将其设置为anon以针对匿名用户。
有了所有这些,你应该有下面的简单策略来做你想做的事情。

请注意,让用户登录到您的应用并不是必须的,但在您开始推广应用之前可能需要考虑一些事情,因为否则任何人都可以将图像上传到您的存储桶,而不受任何限制。

相关问题