el-upload图片回显

el-upload 是 Element UI 中的一个上传组件，用于实现图片上传功能。要实现图片回显，可以通过自定义上传的方法来实现。

首先，在 el-upload 中设置上传的方法，在上传成功后，后端会返回一个图片的链接。然后我们可以在前端使用这个链接来回显图片。

在上传成功后会返回图片链接，我们可以将这个链接保存在前端的 data 中，然后在页面中使用 img 标签来显示图片，img 标签的 src 属性设置为保存的图片链接即可。

例如:

<el-upload
  action="/uploadURL"
  :on-success="handleSuccess">
</el-upload>

data() {
  return {
    imageUrl: ''
  }
},
methods: {
  handleSuccess(response, file, fileList) {
    // 上传成功后保存图片链接
    this.imageUrl = response.data.url;
  }
}

<img :src="imageUrl" style="width: 100px; height: 100px;">

以上就是使用 el-upload 实现图片回显的方法，通过保存图片链接并在页面中显示图片，就可以实现图片回显的效果。

相关问题

el-upload 图片回显

el-upload是一个Vue组件，用于上传文件。在使用el-upload上传图片后，如果需要在页面上回显图片，可以通过配置fileList属性来实现。如果后端返回的是图片地址，需要将url赋值到fileList里面。如果后端返回的是base64格式的图片，需要将要回显的文件数组处理成id和url才能回显。具体实现可以参考官网提供的示例代码。

el-upload图片回显vue

el-upload是element-ui中的一个文件上传组件，可以通过设置action属性指定上传的地址，通过设置on-success属性指定上传成功后的回调函数。在vue中实现图片回显可以通过以下步骤：
1.在data中定义一个变量来存储上传成功后的图片地址。
2.在on-success回调函数中获取上传成功后的图片地址，并将其赋值给定义的变量。
3.在el-upload组件中通过设置:default-file-list属性来显示上传成功后的图片。

具体实现可以参考以下代码：

<template>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:default-file-list="fileList"
list-type="picture"
:auto-upload="false"
:multiple="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>

<script>
export default {
data() {
return {
fileList: [],
imageUrl: ''
};
},
methods: {
handleSuccess(response, file, fileList) {
this.imageUrl = response.data.url;
},
submitUpload() {
this.$refs.upload.submit();
}
}
};
</script>