Vue中通过el-upload组件实现上传前预览本地图片

1、实现效果如下图所示

用户选择本地待上传的图片，选择成功后，上传组件隐藏，呈现本地预览组件，单击图片并实现图片的放大呈现

2、template（相当于html）部分的代码如下

代码实现逻辑：

在el-upload组件中，将auto-upload设置为false不会执行自动上传，给予on-change一个触发事件imgSaveToUrl，在imgSaveToUrl方法中用于生成可用于本地预览的URL，

其中预览组件中， :preview-src-list="[localUrl]"用于实现单击图片放大呈现

<template>
  <div class="mixin-components-container">
    <div class="content-container">
      <!-- 图片上传控件-->
      <el-row style="padding-left:100px;padding-right:100px;background:#">
        <el-upload
          v-if="isShowUpload"
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture"
          :auto-upload="false"
          :on-change="imgSaveToUrl"
          :accept="'image/*'"
        >
          <i class="el-icon-upload" style="color:#409EFF"></i>
          <div class="el-upload__text text">
            将图片拖到此处，或
            <em>点击上传</em>
          </div>
          <div
            class="el-upload__tip text"
            slot="tip"
          >提示：可支持PNG、JPG、BMP，图片大小不超过4M,长边不大于4096像素，请保证识别的部分为图片的主题部分</div>
        </el-upload>
      </el-row>
      <!-- 本地预览需要上传处理的图片-->
      <el-row v-if="isShowImgUpload" style="padding-left:100px;padding-right:100px;">
        <el-col :span="4" style="color:white">1</el-col>
        <el-col :span="16">
          <div style="position:relative;background-color: #f0f3fa;">
            <el-image
              :src="localUrl"
              :preview-src-list="[localUrl]"
              style="width:100%;height:600px;"
              fit="scale-down"
            ></el-image>
          </div>
          <div style="padding: 5px;">
            <el-button type="primary" :loading="false" size="small" @click="uploadButtonClick">重新上传</el-button>
            <el-button type="primary" :loading="false" size="small" @click="processButtonClick">立即处理</el-button>
          </div>
        </el-col>
        <el-col :span="4" style="color:white">1</el-col>
      </el-row>
    </div>
  </div>
</template>

3、methods部分的imgSaveToUrl方法代码如下

event.raw为图片实体，可通过consolse打印查看详情

imgSaveToUrl(event) {
      // 获取上传图片的本地URL，用于上传前的本地预览
      var URL = null;
      if (window.createObjectURL != undefined) {
        // basic
        URL = window.createObjectURL(event.raw);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        URL = window.URL.createObjectURL(event.raw);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        URL = window.webkitURL.createObjectURL(event.raw);
      }
      // 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
      this.localUrl = URL;
      this.isShowImgUpload = true;//呈现本地预览组件
      this.isShowUpload = false;//隐藏上传组件
    },