vue elementUI 文件上传 前后端代码

以下是Vue ElementUI文件上传的前后端代码示例：

前端代码：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button slot="trigger" size="small" type="primary">上传文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
    handleSuccess(res) {
      if (res.code === 0) {
        this.$message.success('上传成功');
      } else {
        this.$message.error('上传失败');
      }
    }
  }
}
</script>

后端代码（Node.js Express框架）：

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

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 设置文件上传目录
const uploadPath = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadPath)){
  fs.mkdirSync(uploadPath);
}
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadPath);
  },
  filename: function (req, file, cb) {
    const extname = path.extname(file.originalname);
    const filename = Date.now() + extname;
    cb(null, filename);
  },
});
const upload = multer({ storage });

// 处理文件上传请求
app.post('/api/upload', upload.single('file'), function (req, res, next) {
  // 获取上传的文件信息
  const file = req.file;
  if (!file) {
    return res.json({ code: 1, message: '上传失败' });
  }
  console.log('文件上传成功：', file.filename);
  return res.json({ code: 0, message: '上传成功' });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

以上代码示例中，前端代码使用了Vue ElementUI的el-upload组件实现文件上传，设置了文件类型和大小的限制，并通过axios发送文件上传请求。后端代码使用了Node.js的Express框架和multer中间件处理文件上传请求，将上传的文件保存到指定目录中，并返回上传结果和文件信息。