Vue 图片、视频文件的直接下载和在线查看

三杯五岳

已于 2023-05-01 11:43:02 修改

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-05-01 11:12:05 首次发布

本文链接：https://blog.csdn.net/u013164293/article/details/130454711

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、直接下载

      // 仅支持视频下载和图片下载
      /**
       *
       * @param {文件路径} url
       * @param {文件名称} name
       */
      downLoad(url, name) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer'; // 返回类型blob
        xhr.onload = function() {
          if (xhr.readyState === 4 && xhr.status === 200) {
            let blob = this.response;
            console.log(blob);
            // 转换一个blob链接
            // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
            // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
            let downLoadUrl = window.URL.createObjectURL(new Blob([blob], {
              type: 'video/mp4'
            }));
            // 视频的type是video/mp4，图片是image/jpeg
            // 01.创建a标签
            let a = document.createElement('a');
            // 02.给a标签的属性download设定名称
            a.download = name;
            // 03.设置下载的文件名
            a.href = downLoadUrl;
            // 04.对a标签做一个隐藏处理
            a.style.display = 'none';
            // 05.向文档中添加a标签
            document.body.appendChild(a);
            // 06.启动点击事件
            a.click();
            // 07.下载完毕删除此标签
            a.remove();
          };
        };
        xhr.send()
      },

2、在线查看

        var urlStr = encodeURI(url)
        //window.location.href = urlStr;
        window.open(urlStr);

3、可能遇到的问题

1）was loaded over HTTPS, but requested an insecure

当我们的浏览器出现类似“was loaded over HTTPS, but requested an insecure resource/frame”这种错误是，一般都是因为我们的网站是HTTPS的，而对方的链接是HTTP协议的，因此在Ajax或者javascript请求时，就会报如下这种错误：

具体错误类似如下：

Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'. This request has been blocked; the content must be served over HTTPS.

解决方案：

直接使用https地址，或者

在我们的网站<head>标签里面加入如下内容即可：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

它会自动将HTTP请求升级成安全的HTTPS请求，网上的很多解决访问有问题，这个是一定可以的！

三杯五岳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue 图片、视频文件的直接下载和在线查看

Vue 实现图片、视频文件的直接下载和在线查看
复制链接

扫一扫

专栏目录