vue实现图片上传功能

1、通过new FileReader方式

html布局：

<div class='dialog-img-input'>
              <input type="file" id="dialogLogoImgId" name="pic" @change="uploadImg(this)" /> <br/>
</div> //设置透明度为0
<div class='dialog-img-button'>
              <el-button>重新上传</el-button>
</div>

方法一：

let imgFiles = document.getElementById('dialogLogoImgId').files //获取文件列表
let reader = new FileReader()
reader.readAsDataURL(imgFiles[0]) //只有一张图片，如果多张图片需要进行遍历
reader.onload = function (ev) {
 _this.dialogoImgUrl = this.result  //this.result是文件的base64地址地址
      }

通过document.getElementById('dialogLogoImgId').files[0]获取图片路径，请求接口，获取服务器图片地址

然后写到预览中