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

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 可能会大于 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/archives/js-image-preview