vue本地讀取圖片轉碼Base64
阿新 • • 發佈:2018-12-11
<input type="file" id="id" name="image" class="getImgUrl_file" @change="shangc($event)" accept="image/jpg,image/jpeg,image/png">
通過:
let files = document.getElementById('id').files[0]
來獲取上傳的圖片資訊 在通過:
let reader = new FileReader();
reader.readAsDataURL(files)
將讀取到的圖片轉碼成Base64的一個字串,但需要擷取
shangc(e){ let files = document.getElementById('id').files[0] let name = document.getElementById('id').files[0].name let arr = name.split('.') console.log(arr); let fileSize = 0; let fileMaxSize = 10240;//1M if(files){ fileSize =files.size; if (fileSize > 10*1024*1024) { alert("檔案大小不能大於10M!"); file.value = ""; return false; }else if (fileSize <= 0) { alert("檔案大小不能為0M!"); file.value = ""; return false; } }else{ return false; } //轉碼base64 let reader = new FileReader(); let imgFile // let that = this reader.readAsDataURL(files) reader.onload = e => { imgFile = e.target.result; let arr = imgFile.split(',') this.datas.faceBase64 = arr[1] // console.log(imgFile) // console.log(this.datas.faceBase64) } },