ElementUI组件之头像上传, 并储存在后端服务器

在使用ElementUI的<el-upload>组件实现头像上传并储存到服务器端时，你需要做以下几个步骤：

1. 使用<el-upload>组件来上传文件。
2. 配置上传动作(action)指向你的后端上传接口。
3. 确保后端接收上传的文件并进行处理（例如储存）。

以下是一个简单的例子：

前端代码（Vue）:

<template>
  <el-upload
    class="avatar-uploader"
    action="http://your-backend-server.com/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
 
<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 这里可以做其他处理，比如更新用户信息等
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
 
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
 
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

后端代码（Node.js）:

const express = require('express');
const multer = require('multer');
const app = express();
 
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})
 
const upload = multer({ storage: storage })
 
app.post('/upload', upload.single('file'), (req, res) => {
  // 这里可以对上传的文件进行处理，比如保存路径、数据库等
  // 返回结果给前端
  res.send({ status: 'success', data: { url: `http://your-backend-server.com/uploads/${req.file.filename}` } });
})
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
})

确保后端服务器正确配置并运行，前端代码中的action属性应指向后端服务