前端如何预览input读入的图片？

Question

描述

前端使用elementUI 的upload ，读取本地图片
读到的file格式如下

问题

前端如何预览input读入的图片？

尝试解决

1. createObjectURL

   const avatarPreviewUrl = URL.createObjectURL(new Blob(file.buffer));
   this.avatarPreviewUrl = avatarPreviewUrl;

得到的url ：
blob:http://localhost:8081/9043e91...
图片出不来：

2. 用filereader，结果参数不对

var reader = new FileReader();
reader.readAsDataURL(new Blob(file.buffer));
reader.onload = event => {
  console.log(reader.result);
};

log出来是这样的

Answer 1

raw 是 File 类型， File 类型继承 Blob 类型。

所以 URL.createObjectURL(file); 即可。得到的就是 blob:http 开头的文件，放入 img 标签的 src 属性即可。

http://www.lilnong.top/static...

但是你要注意的是，这个这能本次显示。浏览器关闭之后，或者存储服务端给他人查看是不行的。

Answer 2

参考前端常用文件下载上传方法

let file = document.querySelector("#imgBlob");
this.imgBlobSrc = window.URL.createObjectURL(file.files[0]);

或者base64,查看示例参考