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

<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>

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);//获取到的文件
    //做些其他事情
})

    <el-upload
        ref="upload"
        style="display: inline"
        drag
        action=""
        :before-upload="beforeUploadHandle"
        :http-request="handleUploadForm"
        :auto-upload="false"
        multiple
        :limit="1"
        :on-exceed="handleExceed">
      <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link>
    </el-upload>

:auto-upload=“false”

:limit=“1”

:before-upload=“beforeUploadHandle”

:http-request=“handleUploadForm”

:on-exceed=“handleExceed”

this.$refs.upload.submit();

    beforeUploadHandle(file) {
      if (
          file.type !== "image/png" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件！");
        return false;
      }
    },

handleUploadForm(param) {
      console.log(this.pid)
      let thisInfo = this
      let formData = new FormData()
      // 在formData中加入我们需要的参数
      formData.append('file', param.file)
    	formData.append('id', this.pid)
    // 向后端发送数据
      thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => {
        if (res.status === 200) {
          thisInfo.$message.success('修改信息成功')
        } else {
          thisInfo.$message.success('修改信息失败')
        }
        thisInfo.formFileList = []
        thisInfo.uploadFormFileList = []
      })
    }