首页el-upload回显照片

el-upload回显照片

时间: 2023-08-15 21:14:12 浏览: 152

你可以使用 `el-upload` 组件来上传照片，并通过回显来显示上传的图片。下面是一个示例代码： ```html <template> <div> <el-upload class="upload-demo" action="/upload" :show-file-list="false" :before-upload="beforeUpload" :on-success="onSuccess" > <el-button type="primary">点击上传照片</el-button> </el-upload> <img v-if="imageUrl" :src="imageUrl" alt="uploaded image" /> </div> </template> <script> export default { data() { return { imageUrl: '' }; }, methods: { beforeUpload(file) { // 进行图片格式、大小等校验 const isImage = file.type.startsWith('image/'); const isLt2M = file.size / 1024 / 1024 < 2; if (!isImage) { this.$message.error('请上传图片文件!'); } if (!isLt2M) { this.$message.error('图片大小不能超过 2MB!'); } return isImage && isLt2M; }, onSuccess(response) { // 上传成功后获取服务器返回的图片地址 this.imageUrl = response.imageUrl; } } }; </script> ``` 在这个示例中，`el-upload` 组件用来上传照片。通过设置 `:show-file-list="false"`，可以隐藏上传文件的列表。`beforeUpload` 方法用于校验图片格式和大小，`onSuccess` 方法用于处理上传成功后的回调。在模板中，当有 `imageUrl` 时，使用 `<img>` 标签来显示上传的图片。你需要根据自己的实际情况修改 `action` 属性为后端接口地址，以及根据后端返回的数据结构修改 `onSuccess` 方法中的代码。

阅读全文