编辑：我已经更新了CORS配置，但它仍然显示相同的错误。
我的页面上有一个Tinymce RTE，当你把一个图片放到编辑器中时，我有一些函数可以把它上传到firebase的存储器中，然后用从firebase中获取的url替换掉文本编辑器的src。它工作起来还不错，但是它被显示为一个断开链接的图片图标。
当我检查链接时，这是因为最初它在点击链接时下载图像。我在它上传时添加了一个元数据属性，但现在它只显示一个小框。
下面是将放入编辑器的图像上载到firebase存储器的代码
const imagesUploadHandler = async (blobInfo, success, failure) => {
try {
const file = blobInfo.blob();
const storageRef = ref(storage, file.name);
const metadata = {
contentType: 'image/jpeg',
};
await uploadBytes(storageRef, file, metadata);
const url = await getDownloadURL(storageRef);
console.log(url);
return url;
} catch (error) {
// Call the failure callback with the error message
console.log(error.message);
}
};最初，我没有包括contentType元数据，它只是作为应用程序/八位字节流上传，我想这就是为什么它提示您保存图像。
图片链接https://firebasestorage.googleapis.com/v0/b/cloudnoise-news.appspot.com/o/ref.jpg?alt=media&token=1edc90e7-1668-4a06-92a3-965ce275798b
当前显示此x1c 0d1x
我查过一些东西
- firebase存储规则处于测试模式，因此任何人都应该能够读取和写入。
- 我试着插入不同的MIME类型，但它要么显示小框，要么显示“未定义”
- 文件上传成功，Tinymce编辑器中的“交换”也很好。
知道为什么会这样吗？
2条答案
按热度按时间vawmfj5a1#
您需要设置元数据标记
这应确保在将图像上传到Firebase存储时设置正确的内容类型。
如果这样做不能解决问题，您可能需要检查从getDownloadURL返回的URL是否有效以及是否指向正确的图像。您可以尝试在新的浏览器选项卡中打开该URL，以验证该图像是否可访问。
cgvd09ve2#
我通过添加一个blob来修复它，我用文件数据创建了一个blob对象，然后我只是让它上传blob对象而不是单个文件。