在我的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:
1条答案
按热度按时间cedebl8k1#
您上载文件的方式不符合您的插入策略。
问题是您有
storage.foldername(name)[1] = 'public'
,但您没有将图像上传到public
文件夹中。要通过此策略,您需要将图像上传到/public
路径而不是/
。我假设你在这里的意思是你正在上传一张图片到一个公共桶,但这与上传到公共路径是不同的。我认为你可以删除storage.foldername(name)[1] = 'public'
语句。此外,还有其他一些东西你也可以删除。首先,我们最近添加了一个功能来限制上传到bucket的对象的meme类型。你可以这样设置它只接受jpg。
关于角色,指定要将策略应用于哪个角色的正确方法是从策略编辑器中选择
target roles
。您可以将其设置为anon
以针对匿名用户。有了所有这些,你应该有下面的简单策略来做你想做的事情。
请注意,让用户登录到您的应用并不是必须的,但在您开始推广应用之前可能需要考虑一些事情,因为否则任何人都可以将图像上传到您的存储桶,而不受任何限制。