ionic4 图片选择

使用html自带图片上传功能，并转为base64

<img src="{{res}}" class="im2" />
        <input type="file" accept="image/*" class="in1" id="m_feedback_bg" οnchange="mpreviewFile(event)" />

.in1{
    opacity: 0;
    height: 100px;
    width: 100px;
    margin-left: 80px;
}

img标签是图片显示，后面input图片选择控件可见度为0，完全覆盖img标签。

ionViewDidEnter() {
    document.getElementById('m_feedback_bg').onchange = (evt) => {
      this.mpreviewFile(evt);
    }
  }

mpreviewFile(evt) {
    if (evt.target.files.length == 0) {
      this.toast("图片加载失败");
      return;
    }
    if (!evt.target.files[0].size) {
      this.toast('图片选中失败');
      return;
    }
    let type = evt.target.files[0].type.toLowerCase();
    if (type != 'image/png' && type != 'image/jpg' && type != 'image/jpeg') {
      this.toast('请上传文件格式为png/jpg/jpeg的图片');
      return;
    }
    let file = evt.target.files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = async (mevt) => {
      const mElement: any = document.getElementById('m_feedback_bg');
      mElement.value = '';
      let file: any = mevt.target;
      this.res=file.result;
    };
  }

1.非要在ionViewDidEnter里再注册一次onchange事件，否则偶尔会报错。

2.最终file.result即为base64格式图片，可直接赋值为img并显示。

3.onload后必须把value赋值为空，否则也会报错。