本文探討H5端,使用Vue+mintUI如何友好的上傳圖片並且回顯數據。
<input id="license" type="file" style="display:none" name = 'license' accept = "image/*" @change="uploadImage('license')"/>
uploadImage (name) {
document.getElementById(name).click()
var files = document.getElementById(name).files
if (files.length === 0) {
return
}
var file = files[0]
// 把上傳的圖片顯示出來
var reader = new FileReader()
let vm = this
// 將文件以Data URL形式進行讀入頁面
reader.readAsBinaryString(file)
reader.onload = function (f) {
var result = document.getElementById('licenseImg')
var src = 'data:' + file.type + ';base64,' + window.btoa(this.result)
result.src = src
vm.license = file
}
},