图片上传读取本地路径预览

最近做项目遇到个需求（其实是设计图上的需求），文件上传时如果是图形文件需要获取文件的本地路径做缩略图预览，实现逻辑还是将文件转换为base64编码

html：

<input

        type="file"

        ref="uploader"

        accept=".pdf,image/gif,image/png,image/tif,image/jpg,image/jpeg"

        class="dpnone"

        @change="selectFile"

      />

<img style="width: 40px" :src="currentImg" v-else alt="" />

methods:

selectFile(event) {

let file = event.target.files[0];

var reader = new FileReader();

if (file) {

reader.readAsDataURL(file);

}

reader.addEventListener(

"load",

() => {

this.currentImg = reader.result;

},

false

);


},

这个功能上线之后，客户发现老一点的小米手机只能选择图片拿不到文件，当时以为是微信浏览器有限制，没想到后面又出现了一堆浏览器兼容性问题（一部分浏览器可以选择文件，一部分只能选择图片）我没想到的是原生的input上传文件还会有兼容性问题；检查后发现是 accept属性有兼容性问题，具体的没有去整理，还是用js拦截文件类型吧