input中type="file"，并显示图片

语法

<input type="file" id="file" onchange="fileChange"/>

其中，

onchange是文件上传之后的回调，可以通过如下拿到文件。

fileChange (e) {
    let files = e.target.files // 上传的文件数组
    e.target.value = '' // 这段代码划重点哦~，
}

其中，

e.target.value = ''，这段代码如果不加，则上传同样的文件不会触发onchange方法。

图片显示

使用FileReader来实现图片的显示。

fileChange (e) {
    let file = e.target.files[0]
    let fileReader = new FileReader()
    let src = fileReader.readAsDataURL(file) // 读取的是加密之后的本地文件路径
    fileReader.onload = (e) => { // 数据读取文件存在异步，使用回调函数。e.target就是filereader
     let img = document.createElement('img')
     img.src = e.target.result
     let bodyEl = document.getElementById('app')
     bodyEl.appendChild(img)
    }
    this.$refs.file.value = '' // vue中的语法
}

其中，

对于回调中的e，大家有疑问可以打出来看看是什么。