如何判断Firebase返回的data_URL对应资源是图片还是视频？(Next.js/React)

上传文件到Firebase Storage后，返回的URL格式如下，不包含文件扩展名，导致无法直接判断是图片还是视频，需要先确定mediaType再渲染对应组件：

https://firebasestorage.googleapis.com/v0/b/app_name/o/posts%2postId?alt=media&token=token

首次尝试代码 #

通过Firebase Storage API获取文件后，用fetch请求URL并解析Blob类型：

const [mediaType, setMediaType] = useState(null);
    
useEffect(() => {
    if (postImage) {
        const storageRef = firebase.storage().ref();
        storageRef.child(postImage).getDownloadURL().then(url => {
            fetch(url)
                .then(res => res.blob())
                .then(blob => {
                    let type = blob.type;
                    if (type.startsWith("image")) {
                        setMediaType("image");
                    } else if (type.startsWith("video")) {
                        setMediaType("video");
                    } else {
                        setMediaType("other");
                        console.log("Unknown file format: " + type);
                    }
                });
        });
    }
}, [postImage]);

第二次尝试代码 #

在文件选择阶段，通过FileReader读取DataURL，直接判断开头标识；若无法识别则请求获取Content-Type：

const handleFile = async (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = async (e) => {
        const dataURL = e.target.result;
        if (dataURL.startsWith('data:image/')) {
            setMediaType('image');
            setDataUrl(dataURL);
            console.log("Image: " + dataURL);
        } else if (dataURL.startsWith('data:video/')) {
            setMediaType('video');
            setDataUrl(dataURL);
            console.log("Video: " + dataURL);
        } else {
            let response = await fetch(dataURL);
            let type = response.headers.get("Content-Type");
            if (type.startsWith("image")) {
                setMediaType("image");
                setDataUrl(dataURL);
            } else if (type.startsWith("video")) {
                setMediaType("video");
                setDataUrl(dataURL);
            } else {
                setMediaType("other");
                console.log("Unknown file format: " + type);
            }
        }
    }
    reader.readAsDataURL(file);
 }

渲染对应的组件代码 #

根据mediaType的值，渲染图片、视频或提示文本：

<div className="w-full px-3">
    {mediaType === 'image' ? <img className="shadow-md w-full" src={postImage || 'default-image.jpg'} alt="" /> : null}
    {mediaType === 'video' ? <ReactPlayer layout="fill" url={postImage} config={{file:{attributes:{controlsList:'nodownload'}}}} controls onContextMenu={e => e.preventDefault()}/> : null}
    {mediaType === 'other' ? <p>非图片或视频文件</p> : null}
</div>

内容的提问来源于stack exchange，提问作者Jobajuba