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

某些情况下，使用element-ui的upload组件默认上传无法满足我们的需求，so～今天主要介绍如何使用element-ui实现自定义上传，以及后端如何接收上传的文件信息和其他信息，根据element-ui文档，http-request可以自定义上传方法，会覆盖掉默认的上传。

首先我们来看前端代码：

<template>
  <div style="margin-top:100px">
    <el-form :model="form">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" label-width="50px">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="文件" label-width="50px">
        <el-upload 
          class="upload-demo" 
          :auto-upload="false" 
          :limit="1" 
          ref="upload"
          :http-request="upload"
          multiple>
          <!-- :http-request="upload" -->
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
    
    <el-button type="primary" @click="upload">确定</el-button>
  </div>
</template>
<script>
  export default{
    name: 'upload',
    data() {
      return {
        form: {
          name: '',
          age: ''
        }
      }
    },
    methods: {
      upload() {
        const formData = new FormData();
        const file = this.$refs.upload.uploadFiles[0];
        const headerConfig = { headers: { 'Content-Type': 'multipart/form-data' } };
        if (!file) { // 若未选择文件
          alert('请选择文件');
          return;
        }
        formData.append('file', file.raw);
        formData.append('name', this.name);
        formData.append('age', this.age);
        this.$http.post('/api/upload', formData, headerConfig).then(res => {
          console.log(res);
        })
      }
    }
  }
</script>

由于是上传文件，所以我们需要配置下axios请求header的Content-Type为'multipart/form-data'，this.$refs.upload.uploadFiles[0].raw即为我们选择的文件，name和age则为其他要传的信息。

接着，我们来看后端如何获取，这里以node为例：

我们需要安装multer中间件，npm install multer -S即可，接下来我们来看如何使用multer。

首先引入multer：

var express = require('express');
var multer = require('multer')
const upload = multer({ dest: 'uploads/' });

var app = express();
app.use(upload.single('file')); //

app.post('/api/upload', (req, res)=>{
  console.log(req.body);//获取到的age和name
  console.log(req.file);//获取到的文件
    //做些其他事情
})

整个过程下来，就完成了图片的上传，非常简单。

关于multer的用法：https://www.npmjs.com/package/multer