Vue图片上传预览

Vue图片上传预览

想要的效果

代码实现

• 页面核心代码

   

  添加新图：
  
  
  确认添加
  

• script核心代码
  • 方法代码

     

    great: function () {
        document.getElementById('saveImage').onchange = function () {
            var imgFile = this.files[0];
            var fr = new FileReader();
            fr.onload = function () {
                document.getElementById('portrait').src = fr.result;
            };
            fr.readAsDataURL(imgFile);
        }
    }
    

  • 挂载上述方法

     

    mounted: function () {
        this.great();
    }
    

测试运行