js图片前端预览之 filereader 和 window.URL.createObjectURL

js图片前端预览，有2种方法：

1. FileReader
2. window.URL.createObjectURL

FileReader 例子

vue 使用 element-ui 的代码：

        change (e) {
            let _this = this
            var file = e.target.files[0]
            if (!e.target.value) {
                return false
            }
            if (!/\.(jpg|png|JPG|PNG)$/.test(e.target.value)) {
                this.$message('图片类型必须是.jpg、.png中的一种')
                return false
            }
            if (typeof FileReader === 'function') {
                var reader = new FileReader()
                reader.onload = (event) => {
                    _this.idPicSrc = reader.result
                }
                reader.readAsDataURL(file)
            } else {
                alert('Sorry, FileReader API not supported')
            }
        }

window.URL.createObjectURL 例子

        change (e) {
            let _this = this
            var file = e.target.files[0]
            if (!e.target.value) {
                return false
            }
            if (!/\.(jpg|png|JPG|PNG)$/.test(e.target.value)) {
                this.$message('图片类型必须是.jpg、.png中的一种')
                return false
            }
            var src = window.URL.createObjectURL(file) // src：就是要设置图片的 src 地址
        }

FileReader.readAsDataURL()：将文件转化为base64编码字符串

该方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
出处：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL