el-upload图片上传前后端代码

el-upload 是 Element UI 中的一个组件，用于实现图片上传功能。它可以通过前端代码和后端代码配合实现图片上传的功能。

前端代码示例：

<template>
  <el-upload
    action="/upload"  // 后端接口地址
    :headers="{ Authorization: token }"  // 可选，设置请求头
    :on-success="handleSuccess"  // 上传成功回调函数
    :before-upload="beforeUpload"  // 上传前的钩子函数
    :limit="3"  // 可选，限制上传文件数量
    :multiple="true"  // 可选，是否支持多选文件
    :auto-upload="false"  // 可选，是否自动上传
    :file-list="fileList"  // 已上传文件列表
    :on-remove="handleRemove"  // 移除文件回调函数
  >
    <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
    <el-tooltip class="item" effect="dark" content="只能上传jpg/png文件，且不超过2MB" placement="top">
      <i class="el-icon-info"></i>
    </el-tooltip>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],  // 已上传文件列表
      token: 'your_token'  // 可选，请求头中的 token
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功回调函数
      console.log(response);
    },
    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;
    },
    handleRemove(file, fileList) {
      // 移除文件回调函数
      console.log(file, fileList);
    }
  }
};
</script>

后端代码示例（使用 Node.js 和 Express 框架）：

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

const app = express();
const upload = multer({ dest: 'uploads/' });  // 设置上传文件的存储路径

app.post('/upload', upload.single('file'), (req, res) => {
  // 处理上传的文件
  console.log(req.file);
  res.send('上传成功');
});

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

以上是 el-upload 图片上传的前后端代码示例，前端代码使用了 Element UI 的 el-upload 组件，后端代码使用了 Node.js 和 Express 框架配合 multer 中间件来处理文件上传。你可以根据自己的需求进行修改和扩展。