如何检查 data_URL 是否返回视频图像？ - Firebase & Next.js/反应

Question

图像上传到 firebase 并作为 data_URL 返回，如下所示：

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

我正在尝试检查文件类型是视频还是图像，然后根据“mediaType”返回一个 div。 因为firebase存储不包括url中的文件扩展名，所以很难判断文件类型。

第一次尝试：

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]);

第二次尝试：

  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);
 }

我的 return 语句中的 div：

 <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>File is not an image or video</p> : null}
 </div>

Answer 1

我要做的是在将文件上传到 firebase 时添加metadata 。您可以查看文档以了解如何：

//This is a metadata, you can customize these
//as you can see the content type is set to be image/jpeg

var newMetadata = {
  cacheControl: 'public,max-age=300',
  contentType: 'image/jpeg'
  .........
  .........
};

您将在使用以下方式上传文件时使用此metadata ：

storageRef.updateMetadata(newMetadata).......

并在读取文件时读出您为文件设置的metadata ，例如检测其类型：

storageRef.getMetadata().then((metadata) => {
//use this metadata to know the type here.......
})

希望这能让您知道该怎么做。