前端选择本地图片并展示到img标签中

一、使用base64

let fileData = [];
fileData.push(file);
const reader = new FileReader();
let blob = new Blob(fileData, {type:this.file.type});
// 老版本的谷歌内核readAsDataURL函数需要的参数直接就是file对象
reader.readAsDataURL(blob);
reader.onload = () => {
    // 这里的reader.result就是图片的base64了，直接放到img标签的src中就可以展示了，转换的操作是异步的
    this.userInfoForm.headImg = reader.result;
};

二、使用内存

// 把图片存到内存中，并返回该图片的临时url
let windowURL = window.URL || window.webkitURL;
let url = windowURL.createObjectURL(new Blob([this.file], {type:this.file.type}));
// 这里的url就是图片的内存地址
console.log(url);

// 图片不需要的时候使用该代码清理内存
windowURL.revokeObjectURL(url);

使用内存的方法好处是速度快，并且是同步的操作，但是缺点也很明显，如果存储的图片较多，会对内存造成压力。存在内存中的数据不会自动清理。