前端选择本地图片并展示到img标签中
一、使用base64
1 let fileData = []; 2 fileData.push(file); 3 const reader = new FileReader(); 4 let blob = new Blob(fileData, {type:this.file.type}); 5 // 老版本的谷歌内核readAsDataURL函数需要的参数直接就是file对象 6 reader.readAsDataURL(blob); 7 reader.onload = () => { 8 // 这里的reader.result就是图片的base64了,直接放到img标签的src中就可以展示了,转换的操作是异步的 9 this.userInfoForm.headImg = reader.result; 10 };
二、使用内存
1 // 把图片存到内存中,并返回该图片的临时url 2 let windowURL = window.URL || window.webkitURL; 3 let url = windowURL.createObjectURL(new Blob([this.file], {type:this.file.type})); 4 // 这里的url就是图片的内存地址 5 console.log(url); 6 7 // 图片不需要的时候使用该代码清理内存 8 windowURL.revokeObjectURL(url);
使用内存的方法好处是速度快,并且是同步的操作,但是缺点也很明显,如果存储的图片较多,会对内存造成压力。存在内存中的数据不会自动清理。