开头语：

我不希望我的资源被别人直接拿去使用，所以我要隐藏我真实资源的地址，在这里主要以图片和视频为例。

视频隐藏真实地址:

    <script>
        function updateVideo(e){
            //上传的资源
            let videoFile=e.files[0];
            //生成blob地址
            let blob=URL.createObjectURL(videoFile);
            document.getElementById("videoDemo").setAttribute("src",blob);

        }
    </script>

    <input type="file" accept="video/mp4" onchange="updateVideo(this)" id="inputUploadVideo"  >
    <video src="" id="videoDemo" controls style="width: 400px;"></video>

从浏览器的调试模式下看到的地址是如下：

图片地址


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Blob Test</title>
    <script>
        function handleFile(e) {
            var file = e.files[0];
            var blob = URL.createObjectURL(file);
            var img = document.getElementsByTagName("img")[0];
            img.src = blob;
            img.onload = function(e) {
                URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象##
            }
        }
    </script>
</head>

<body>
    <input type="file" accept="image/*" onchange="handleFile(this)" />
    <br/>
    <img>
</body>

</html>

blob隐藏真实地址的实现

开头语：

视频隐藏真实地址:

图片地址