Vue中使用FileReader获取PNG文件并实现预览的问题排查

你的图片预览失效是因为FileReader的使用逻辑错误，正确的处理方式如下：

错误点说明 #

在图片处理分支中，你把readAsDataURL()的调用时机搞反了：

• readAsDataURL()是触发文件读取的方法，应该在绑定load事件之后执行。
• 文件读取完成后会触发load事件，此时需要从fileReader.result中获取生成的base64格式图片地址，而非再次调用读取方法。

修正后的代码 #

将图片处理部分的代码替换为：

else if (extension === 'png' || extension === 'jpg') {
  fileReader.addEventListener('load', () => {
    // 文件读取完成后，从result属性获取base64格式的图片地址
    this.imageBuffer = fileReader.result;
  });
  // 绑定事件后，调用readAsDataURL开始读取文件
  fileReader.readAsDataURL(event.target.files[0]);
}

补充说明 #

• 你需要的就是readAsDataURL()方法，它会将图片文件转换成data:image/xxx;base64,...格式的字符串，直接赋值给img的src就能实现预览。
• 如果需要强制将图片转换为PNG格式，得借助Canvas做格式转换，但仅做原文件预览的话，上面的代码已经足够。

内容的提问来源于stack exchange，提问作者Jam