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

图片上传前预览，应该算是一个广泛的需求，不少时候可能选中的图片并非想要的那张，因此须要上传前预览下。

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

思路

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

代码实现

由于使用原生 JS 操做 DOM 过于麻烦，如下示例使用 Vue，可是思路和方法是同样的！

html 部分示例：

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

script 部分示例：

fileChange(e) {
    // 选中的文件列表，若是设置了多选，length 可能会大于 1
    const 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/arc...