vuejs/Html/Javascript选择图片文件并显示在div/img标签中的实现

如题的需求：使用input 标签type=file来选择图片文件并显示在div/image标签中的实现。不过文件选择组件不能自定义我要的按钮，我使用了样式给input隐藏起来，然后自己再使用div画了一个按钮（选择照片）

html代码如下:

<div style="width:96px;height: 128px;border: #A2A2A2 1px solid;text-align: center;background: #FAFAFA;">
  <img :src="portraitData" v-if="portraitData" />
</div>

<label class='tp' for="uploads" style="margin: 0 auto;">
  <input id="uploads" style="visibility: hidden;width: 1px;" type="file" capture="camera" @change="previewImage" accept="image/jpeg">
  <div style='background: #0FAEFE;display: inline-block;color:white;padding:4px 10px;text-align: center;'>选择照片</div>
</label>

利用previewImage()函数来实现显示选择后的图片，js代码如下:

previewImage: function () {
  var _this = this;
  var input = event.target;
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      _this.portraitData = e.target.result;
    }
    reader.readAsDataURL(input.files[0]);
  }
},