Vue 图片、视频文件的直接下载和在线查看
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/”这种错误是，一般都是因为我们的网站是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请求，网上的很多解决访问有问题，这个是一定可以的！
