前言

有很多时候，会有图片上传的需求，用户选择上传图片后，要求在界面进行显示，当点击保存，或者确定按钮的时候上传到服务器。
话不多说直接上代码

<div class="upload-con">
      <input type="file" @change="uploadImg" ref="uploadFile" name="file"
             style="width: 100%; height: 100%;cursor: pointer;position: absolute;left: 0;top: 0;opacity: 0">
      <img :src="imgUrl" alt="" style="width: 100%;height: 100%;position: absolute;left: 120px;">
    </div>

为了能让大家看的明白，所以很多样式是直接写的行内。
效果如下图：

这个背景图是UI小姐姐做的，在.upload-con’ 的背景里面
话不多说，直接上js代码：

     uploadImg() {//input的change事件
        this.uploadMsg = this.$refs.uploadFile.files[0]; //文件流
        this.imgUrl = this.getImg(this.uploadMsg); //图片地址
      },
      getImg(file) {
        let url = '';
        if (window.createObjectURL !== undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL !== undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL !== undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
      }

这样就将本地上传的图片显示在界面，同时存在定义的uploadMsg 变量里面 ，图片地址存在imgUrl 变量里面，当然上面的方法同样适用后台返回二进制流，前端 img 标签的显示图片问题
效果如下：

好了，就这样完美解决图片上传显示问题，还有后台返回二进制流显示的问题
转载需标注！
还请多多指教！