Element UI 图片上传并回显：前后端实现教程

要实现本地图片上传并回显，需要前后端配合完成。以下是一个基于 Element UI 的示例：

前端代码：

<template>
  <div>
    <el-upload
      class='avatar-uploader'
      action='/api/upload'
      :show-file-list='false'
      :before-upload='beforeUpload'
      :on-success='handleSuccess'
      :on-error='handleError'
    >
      <img v-if='imageUrl' :src='imageUrl' class='avatar'>
      <i v-else class='el-icon-plus avatar-uploader-icon'></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '' // 图片URL
    };
  },
  methods: {
    beforeUpload(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) {
      this.imageUrl = response.url;
    },
    handleError() {
      this.$message.error('上传失败');
    }
  }
};
</script>

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

.avatar {
  width: 100%;
  height: 100%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  cursor: pointer;
}

</style>

在上述代码中，el-upload 是 Element UI 的上传组件。action 属性指定了上传的接口地址，这里假设为 /api/upload。before-upload 方法用于校验文件的类型和大小。on-success 方法在上传成功时回调，on-error 方法在上传失败时回调。

后端代码（以 Node.js 为例）：

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  // 在这里可以对上传的文件进行处理，比如保存到数据库或者返回文件URL等

  // 返回文件URL
  res.json({
    url: `http://localhost:3000/${file.filename}`
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在后端代码中，通过 multer 中间件来处理文件上传，将上传的文件保存到 uploads/ 目录下。在这里可以根据实际需求对上传的文件进行处理，比如保存到数据库或者返回文件URL等。这里示例直接返回了文件的URL。

以上就是一个简单的使用 Element UI 实现本地图片上传并回显的示例，前后端配合完成图片的上传和回显功能。