vue自定義圖片上傳預覽功能
//vue裡面的HTML程式碼
<div id="modificationPreview">
<input type="file" accept="image/*" @change="changeFile" id="modificationFile" value="" />
<img :src="imageUrl" id="modificationImg">
</div>
//js程式碼
//圖片選擇預覽函式
preiverImage(file,imgId){
let _this = this;
let fileImg = file.files[0];
// 確認選擇的檔案是圖片
if(fileImg.type.indexOf("image") == 0) {
let img = document.getElementById('imgId');
let reader = new FileReader();
reader.onload = function(evt){
_this.imageUrl = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}else{
alert('請選擇圖片上傳!');
}
},
//函式呼叫
changeFile(){
let imgaeId = document.getElementById('modificationImg');
let fileId = document.getElementById('modificationFile');
this. preiverImage(fileId,imgaeId)
},