window.URL.createObjectURL se puede usar para obtener una vista previa de imágenes o videos locales en el navegador.
Uso común:
Si desea ver las representaciones de imágenes y archivos cargados cuando no hay un servidor de carga local, puede usar var url = window.URL.createObjectURL(files[0]); para obtener una ruta de URL en formato http y establecerla en el src del valor del atributo de imagen, puede mostrar el efecto.
gramática:
objectURL = URL.createObjectURL(blob || archivo);
parámetro:
Objeto de archivo || Objeto de blob
El objeto File es un archivo. Si utiliza la etiqueta input type="file" para cargar un archivo, obtendrá un objeto File.
Los objetos Blob son datos binarios. El objeto más simple creado por new Blob() es un objeto Blob. Por ejemplo, al enviar una solicitud, si el tipo de respuesta del encabezado de la solicitud se especifica como blob, el valor devuelto también es un objeto 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();
};