JavaScript 实现图片上传前本地预览

图片上传前预览，应该算是一个普遍的需求，很多时候可能选中的图片并不是想要的那张，所以需要上传前预览下。

JS（浏览器中）是一门特殊的语言，它没有直接读写磁盘文件的权限，想要操作文件还得配合<input type="file"/>标签，而且通过这个标签获得的File对象是只读的，同时也无法获取到此文件所在的路径。那么，该如何显示预览呢？

1. 思路

直接显示路径不行，那就将图片转化成 data URL 或者说Base64

2. 代码实现

因为使用原生 JS 操作 DOM 过于麻烦，以下示例使用Vue，但是思路和方法是一样的！

html 部分示例：

<input type="file" @change="fileChange"/><img v-if="imgUrl" :src="imgUrl" alt=""/>

script 部分示例：

fileChange(e) {// 选中的文件列表，如果设置了多选，length 可能会大于 1const fileList = e.target.files;if (fileList.length === 0) {this.imgUrl = '';return;}const file = fileList[0];// 使用 FileReader 读取文件对象const reader = new FileReader();// 读取完毕后获取结果reader.onload = event => {this.imgUrl = event.target.result;};// 把文件对象作为一个 dataURL 读入reader.readAsDataURL(file);}

效果展示：

欢迎转载，转载请注明出处：https://blog.kaguramea.me/archives/js-image-preview