element上传文件回显

element是一款流行的Vue.js框架的组件库，其中包含许多功能强大的组件，如上传文件组件。使用element的上传文件组件时，文件上传成功后可以使用回显功能来显示上传的文件。

回显是指在文件上传成功后，将所上传的文件在页面上显示出来。使用element的上传文件组件时，可以通过设置show-upload-list属性来决定是否显示上传文件列表。同样，可以使用文件列表组件el-upload-list来实现文件的回显功能。

在上传文件组件el-upload中，通过设置success事件来获取上传成功后返回的数据。在success事件中，可以通过传入的参数response来获取后端返回的数据。在回调函数中，可以将返回数据中的文件名或文件路径等信息添加到文件列表组件el-upload-list中，从而实现文件的回显功能。

除了文件列表组件el-upload-list外，element中还提供了许多其他组件，如对话框组件el-dialog、提示框组件el-message等，这些组件可以与上传组件一起使用，实现更加丰富的文件上传功能，提高用户体验。

相关问题

element 上传图片 回显

Element UI 中提供了 `el-upload` 组件用于上传文件，可以通过设置 `:show-file-list="false"` 来禁止上传成功后在页面上显示已上传的文件信息，而是通过 `:on-success` 回调函数获取上传成功后的返回值进行处理，进而实现图片上传成功后的回显。

以下是一个示例代码：

<template>
  <el-upload
    class="avatar-uploader"
    action="/upload"
    :on-success="handleSuccess"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      }
    },
    methods: {
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return false
        }
        return true
      },
      handleSuccess(response, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw)
        // 可以将response中的图片地址保存到数据库中，以便之后再次访问时显示已上传的图片
        console.log(response)
      }
    }
  }
</script>

<style>
  .avatar-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f7f7f7;
  }

  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    transition: all .3s;
  }

  .avatar-uploader:hover .avatar-uploader-icon {
    color: #409EFF;
  }
</style>

在 `handleSuccess` 回调函数中，通过 `URL.createObjectURL` 方法将上传成功后的文件转换成本地 URL 地址，再将其赋值给 `imageUrl` 变量，即可实现图片上传成功后的回显。

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 ]