在开发过程中，图片上传和展示是非常常见的需求。而Vue的Element UI库中的组件el-upload提供了图片上传以及图片回显的功能，使用起来也非常方便。本文将从多个方面详细介绍el-upload图片回显的相关知识。
一、图片回显基础
图片回显是指在页面上展示已经上传的图片，这是图片上传功能的必备环节。在el-upload中，图片回显分为两种情况：一是通过URL展示已上传的图片，二是通过Base64展示已上传的图片。 要实现图片回显，需要在el-upload标签内添加一个el-image组件，在组件的src属性中绑定需要回显的图片地址或Base64编码。代码示例：
<el-upload
class="upload-demo"
action="your-upload-url"
:show-file-list="false"
:on-success="handleUploadSuccess">
<el-button slot="trigger">选取文件</el-button>
<el-image v-if="imageUrl"
style="width: 100%"
:src="imageUrl"
:preview-src-list="[imageUrl]">
</el-image>
</el-upload>
需要注意的是，如果使用URL进行图片回显，则需要服务器返回URL地址；如果使用Base64进行图片回显，则需要在服务器返回成功的信息中包含图片的Base64编码。
二、图片单选和多选
el-upload提供了单选和多选的功能，可以根据需求进行选择。默认情况下，el-upload是多选的，可以通过设置属性before-upload的返回值来控制是否可以多选或单选。 多选代码示例：
<el-upload
class="upload-demo"
action="your-upload-url"
:show-file-list="false"
:on-success="handleUploadSuccess">
<el-button slot="trigger">选取文件</el-button>
<el-image v-if="imageUrl"
style="width: 100%"
:src="imageUrl"
:preview-src-list="[imageUrl]">
</el-image>
</el-upload>
单选代码示例：
<el-upload
class="upload-demo"
action="your-upload-url"
:show-file-list="false"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload">
<el-button slot="trigger">选取文件</el-button>
<el-image v-if="imageUrl"
style="width: 100%"
:src="imageUrl"
:preview-src-list="[imageUrl]">
</el-image>
</el-upload>
