用vue + element ui + node 写一个图片上传并返回图片路径

以下是一个简单的Vue组件，使用Element UI中的Upload组件和Node.js的Express框架来实现图片上传并返回图片路径的功能。

前端代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :auto-upload="false"
      :file-list="fileList"
      list-type="picture-card"
      :limit="1"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      imageUrl: '',
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      this.imageUrl = response.url;
      this.$emit('upload-success', this.imageUrl);
    },
    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;
    },
  },
};
</script>

后端代码：

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

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/images');
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext);
  },
});

const upload = multer({ storage: storage });

app.post('/api/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  const url = `http://${req.headers.host}/images/${file.filename}`;
  res.json({ url });
});

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

在前端代码中，我们使用了Element UI中的Upload组件来实现图片上传的功能。其中，我们设置了上传路径、上传成功的回调函数、上传前的校验函数等。

在后端代码中，我们使用了Node.js的Express框架和multer中间件来处理文件上传。我们设置了文件存储路径和文件命名规则，并在上传完成后返回图片的访问路径。

最后，我们可以在Vue组件中监听`upload-success`事件来获取上传成功后返回的图片路径。