Vue中通过el-upload组件实现上传前预览本地图片_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/"
          lis