如何在Firebase中将唯一ID保存为图像名称？

编程问答 2022-10-31

问题描述

伙计们，我有一个与Firebase有关的问题，所以问题是每当我上载同一张照片两次时，我就收到一个错误，即由于具有相同的名称而无法提取以前的照片（这是一个空白的img图标），所以我安装了一个会生成唯一ID的库'uuidv4'，所以我该如何放置和保存唯一ID而不是给定的图像名称

let uniqueId = uuidv4()
const uploadTask = storage.ref(`images/${image.name}`).put(image);

然后我做到了

let uniqueId = uuidv4()
const uploadTask = storage.ref(`images/${uniqueId}`).put(image);

但出现错误 "Firebase Storage: Invalid argument in put at index 0: Expected Blob or File.

上传功能（我没有在底部包含jsx，所以不用担心右括号）

function ImageUpload({username}) {
    const [image,setimage] = useState(null);
    const [progress,setProgress] = useState(0);
    const [caption,setCaption] = useState('');

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

    const handleUpload = () => {
        let uniqueId = uuidv4()
        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);
                alert(error.message);
            },() => {
                storage
                .ref("images")
                .child(image.name)
                .getDownloadURL()
                .then(url => {
                    db.collection("posts").add({
                        timestamp: firebase.firestore.FieldValue.serverTimestamp(),caption: caption,imageUrl: url,username: username                     
                    })
                })
                setProgress(0)
                setCaption('')
                setimage(null)
            }
        )
    }
return(jsx)
}

解决方法

在firebase中，由您决定要上传的文件的名称。但是，如果图像链接到帐户，我通常会使用登录用户的mAuth ID作为目录或只是文件名。这样可以避免重复！

另一种方法是使用一种由于日期或时间而生成唯一密钥的算法，但是您仍然需要仔细检查该密钥是否已经存在。

我可能不知道另一种方式，因为在实时数据库上创建会以某种方式创建自己的密钥。

使用同一张照片，您可以简单地再次递归地调用该方法并在文件末尾添加索引，但是此方法使用起来并不好。

有关更多或更详细的信息，请查看此帖子： Does Firebase storage offer unique Id's for files?

firebasefirebasefirebase-storagejavascriptreactjsreactjs