下面是详细的攻略：

element-ui配合node实现自定义上传文件方式

一、前端部分

1. 安装element-ui

首先，在项目中安装element-ui，具体命令为：

npm install element-ui --save

1. 配置上传组件

接着，需要在前端页面中配置上传组件，例如：

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

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 0.5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess(response, file, fileList) {
      console.log('response', response)
      console.log('file', file)
      console.log('fileList', fileList)
      this.fileList = fileList
    }
  }
}
</script>

其中，需要注意的是，action属性指定了上传文件的后台接口地址，一般需要使用后端提供的接口地址。before-upload方法指定了上传文件之前的校验操作，此处仅仅实现了对文件类型和文件大小的校验。handleSuccess方法则是文件上传完成后的回调函数。

二、后端部分

1. 创建node服务器

在后端，需要使用node搭建一个服务器，用来接收上传文件的请求。可以使用express框架，具体命令为：

npm install express multer --save

其中，multer是一个node中间件，用来处理上传的多个文件。

然后，创建一个app.js文件，在其中编写一下代码：

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

const app = express()
const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.single('file'), function (req, res) {
  const file = req.file
  console.log('file', file)
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return next(error)
  }
  res.send({ url: 'http://localhost:3000/' + file.filename })
})

app.listen(3000, () => {
  console.log('Server started!')
})

在上面的代码中，app.post监听来自前端页面的上传请求，其中必须指定中间件upload.single('file')。这里的file就是前端页面中指定的上传文件字段。在文件上传成功之后，会返回上传文件的地址。

1. 设置node静态资源

默认情况下，node只能处理文本类型的请求，无法处理二进制文件，如果前端想直接通过链接访问上传的文件，就必须将文件上传的目录设置为静态资源目录。在app.js中加入以下代码即可：

app.use(express.static('uploads'))

三、完整示例

下面是一个完整的示例，可以将前端和后端的代码整合起来运行：

前端部分：

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

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 0.5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess(response, file, fileList) {
      console.log('response', response)
      console.log('file', file)
      console.log('fileList', fileList)
      this.fileList = fileList
    }
  }
}
</script>

<style>
.upload-demo {
  background-color: #f7faff;
  border: 1px dashed #bfcbd9;
  border-radius: 6px;
  margin-bottom: 15px;
  padding: 20px 0;
  text-align: center;
  color: #99a9bf;
  font-size: 14px;
}
</style>

后端部分：

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

const app = express()
const upload = multer({ dest: 'uploads/' })

app.post('/upload', upload.single('file'), function (req, res) {
  const file = req.file
  console.log('file', file)
  if (!file) {
    const error = new Error('Please upload a file')
    error.httpStatusCode = 400
    return next(error)
  }
  res.send({ url: 'http://localhost:3000/' + file.filename })
})

app.use(express.static('uploads'))

app.listen(3000, () => {
  console.log('Server started!')
})

运行测试

运行以下指令，将前端和后端的代码分别运行起来：

npm run serve

node app.js

然后，在浏览器中打开前端页面，点击上传按钮上传一张图片，控制台输出上传成功的信息，并且在uploads目录下会生成一个文件，之后就可以通过地址http://localhost:3000/文件名访问上传的图片文件了。