element ui Plus 头像上传文件流

在使用Element UI的<el-upload>组件进行文件上传时，可以结合后端API接收文件流。以下是一个简单的例子，展示如何使用Element UI的<el-upload>组件上传文件并发送文件流到服务器。

前端Vue代码示例：

<template>
  <el-upload
    class="avatar-uploader"
    action="http://your-backend-api.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) => {
  // 这里可以访问文件的信息 req.file
  // 你可以将文件信息保存到数据库或者进行其他处理
  // 最后返回响应
  res.send('File uploaded successfully')
})
 
app.listen(3000, () => {
  console.log('Server is running on port 3000');
})

确保Element UI和multer（用于处理上传的文件）已经安装在你的项目中。

1. 在前端，<el-upload>组件的action属性设置为你的后端上传API地址。
2. 使用:on-success来处理上传成功后的响应。
3. 使用