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)

},