Vue图片上传预览

想要的效果

代码实现

• 页面核心代码

   

  <h3>添加新图：</h3>
  <img src="" alt="" id="portrait" style="width: 300px;height: 200px;background-color: #eeeeee"/>
  <input type="file" id="saveImage" name="myphoto" accept="image/png,image/gif,image/jpeg"
         ref="new_company_image">
  <el-button @click="addImage">确认添加</el-button>
  

• 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();
    }
    

测试运行