el-upload上传图片不走接口回显

`el-upload` 是 Element UI 提供的一个用于文件上传的组件。如果图片上传后没有显示在页面上而是直接通过接口处理，并没有实时回显到界面，这通常是因为你需要做两步操作：

1. **上传处理**：在 `onSuccess` 或 `onDrop` 回调函数中，除了发送 API 请求，还需要将选中的图片信息保存起来，例如将其URL存储在一个变量或状态里。

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :auto-upload="false" <!-- 阻止默认的上传 -->
  >
    <img v-if="previewFile" :src="previewFile.url" alt="图片预览"/>
    <i v-else class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      previewFile: {},
      uploadedImages: [] // 存储已上传图片的数组
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.uploadedImages.push({ url: file.response.url, name: file.name });
      this.previewFile = file; // 更新预览图
      // 发送 API 请求
      this.uploadAPI(file);
    },
    uploadAPI(file) {
      axios.post('your-api-url', { image: file.url }).then(...);
    }
  }
};
</script>

2. **回显处理**：在数据更新后（比如在 `mounted` 生命周期钩子里），你可以遍历 `uploadedImages` 列表，将图片 URL 显示在需要的地方。

mounted() {
  this.imagesList.forEach(img => (this.$refs.elUpload.clearFiles()));
  this.$nextTick(() => {
    this.uploadedImages.forEach((image, index) => {
      new Image()..src = image.url;
      // 当图片加载完成后再插入DOM
      image.imgNode = document.createElement('img');
      image.imgNode.src = image.url;
      this.$refs.elUpload.appendChild(image.imgNode);
    });
  });
}