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

fete

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

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...

阅读 440

天狗の圈地自萌
个人博客,同步发布

前端程序猿

46 声望
2 粉丝
0 条评论

前端程序猿

46 声望
2 粉丝
宣传栏