element ui 上传文件回显

在element ui中，要实现文件上传后的回显，可以通过以下步骤进行操作。首先，需要在HTML代码中添加一个用于显示回显图片的`<img>`标签。然后，在上传成功的回调函数`uploadSuccess`中，将上传成功的图片地址赋值给`imgSrc`变量，以便在`<img>`标签中显示出来。最后，在`<img>`标签的`v-show`属性中添加一个条件，控制上传成功后的图片是否显示。具体实现代码如下所示：

<!-- 图片上传 -->
<el-row>
  <el-col :span="24">
    <el-form-item label="LOGO" prop="logoImg">
      <el-upload class="upload-demo" ref="upload" name="logoImg" :action="action" :on-success="uploadSuccess" multiple :accept="accept" :limit="1" :show-file-list="false" :on-exceed="handleExceed" :on-progress="uploading" :file-list="fileList" :before-upload="beforeAvatarUpload">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" style="color:#F00">注：只能上传jpg/png文件，图片尺寸必须377mm x 60mm, 且不超过500KB</div>
      </el-upload>
    </el-form-item>
    <el-form-item v-show="imgShow">
      <img :src="imgSrc" style="width: 300px">
    </el-form-item>
  </el-col>
</el-row>

在上述代码中，`uploadSuccess`函数是上传成功后的回调函数，可以在该函数中获取到上传成功的图片地址。对应的`imgSrc`变量用于存储图片地址，以便在`<img>`标签中显示出来。通过控制`v-show`属性，可以根据需求来控制上传成功后的图片是否显示。

请注意，上述代码中的`uploadSuccess`、`imgSrc`、`imgShow`等变量和方法需要根据实际情况进行定义和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [基于spring boot+element ui文件上传的实现与回显（一）-通过I/O实现](https://blog.csdn.net/qq_26751319/article/details/109560375)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [ElementUI图片上传 回显](https://blog.csdn.net/lwx931449660/article/details/88641246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]