window.URL.createObjectURL可用于在浏览器上预览本地的图片或视频。
常用用法:
想在本地没有上传服务器的情况下看到上传图片、文件的效果图,就可以通过var url = window.URL.createObjectURL(files[0]);获得一个http格式的url路径,设置到图片的src属性值,就可以显示效果了。
语法:
objectURL = URL.createObjectURL(blob || file);
参数:
File对象 || Blob对象
File对象,是个文件,若用input type="file"标签来上传文件,获得到的就是一个File对象.
Blob对象,是二进制数据,最简单的new Blob()创建的对象就是Blob对象.又比如,在发送请求时,指定请求头的responseType为blob,那么得到的返回值也是一个blob对象.
//html
<el-drawer v-model="showPDF" title="标题" size="70%">
//type 用于判断文件类型是word还是pdf,为0是word文档
<div ref="refWord" v-if="type == '0'" />
<iframe :src="PDFURL" width="100%" height="1000px" v-else />
</el-drawer>
//js
//预览word需要docx-preview依赖
import * as docx from "docx-preview";
preview(){
this.showPDF = true;
let blob = "";
let xhr = new XMLHttpRequest();
xhr.open("GET", 完整的http文件路径);
xhr.responseType = "blob";
// 加载时处理
xhr.onload = () => {
// 获取返回结果
blob = xhr.response;
// 返回结果,type判断文件类型是否是word
if (type == "0") {
docx.renderAsync(blob, this.refs.refWord);
} else {
let blob1 = new Blob([blob], {
type: "application/pdf",
});
this.PDFURL = window.URL.createObjectURL(blob1);
}
};
// 发送
xhr.send();
};