文本框导入图片并显示到页面上

通过输入框导入图片,并且显示在页面上

本操作作用于vue项目上,请先创建vue2项目

//扩大点击范围
<label for="image">导入图片</label>
    <input type="file" hidden id="image" accept="image/*" @change="handleChange($event)">
    <img src="" ref="image" alt="">

下面是js代码

handleChange(e){
      let that = this;//改变this指向
      let files = e.target.files[0];//图片文件名
      if (!e || !window.FileReader) return; // 看是否支持FileReader
      let reader = new FileReader();//创建一个filReader实例
      reader.readAsDataURL(files); // 关键一步，在这里转换的
      reader.onloadend = function () {
         that.$refs.image.src=this.result;
      }
    }