ElementUI :el-upload调用一次接口同时上传多个文件及表单

目的

el-upload组件默认情况下上传多少个文件就会请求多少次上传接口 实现请求一次接口同时上传多个文件及表单

实现方案

multiple 支持多选文件
:auto-upload="false" 不在选取文件后立即进行上传
:http-request="httpRequest" 覆盖默认的上传行为 自定义上传的实现
this.$refs.upload.submit()

代码实现

<template>
    <div id="text">
    <el-form ref="form" :model="newData" label-width="80px" label-position="right" size="mini">
        <el-form-item label="上传文件" prop="name">
            <el-upload
                ref="upload"
                multiple
                name="File"
                action=""
                :auto-upload="false"
                accept=".dll, .DLL, .xml, .XML"
                :http-request="httpRequest"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <span slot="tip" class="el-upload__tip">&nbsp;&nbsp;&nbsp;只能上传dll/xml文件</span>
            </el-upload>
        </el-form-item>
        <el-form-item label="作者名称" prop="authorName">
            <el-input v-model="newData.authorName"></el-input>
        </el-form-item>
        <el-form-item label="作者单位" prop="authorFirm" >
            <el-input v-model="newData.authorFirm"></el-input>
        </el-form-item>
        <el-form-item label="模型类别" prop="number">
            <el-input v-model="newData.number"></el-input>
        </el-form-item>
        <el-form-item label="模型版本" prop="versions">
            <el-input v-model="newData.versions"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark"  label-width="80px">
            <el-input v-model="newData.remark" type="textarea"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="newForm" size="mini">确 定</el-button>
        <el-button @click="editDialog = false" size="mini">取 消</el-button>
    </div>    
  </div>
</template>
<script>
import request from "@/Utils/request";

export default {
  data () {
    return {
      newData:{},
      file:[]    
    }
  },
  methods:{
    httpRequest(param) {
        this.file.push(param.file);// 一般情况下是在这里创建FormData对象，但我们需要上传多个文件，为避免发送多次请求，因此在这里只进行文件的获取，param可以拿到文件上传的所有信息
    },
    // 提交
    newForm(){
        var upData = new FormData();
        this.$refs.upload.submit();// 这里是执行文件上传的函数，其实也就是获取我们要上传的文件   
        this.file.forEach(function (file) {// 因为要上传多个文件，所以需要遍历
            upData.append('file', file, file.name); 
            // upData.append('file', this.file); //不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
        })
        upData.append("body", JSON.stringify(this.newData)) // 这里需要转换一下格式传给后台
        request
        .post('http://202.41.241.221:9095/uploader/uploadFile',upData)
        .then(function(response) {
        if (response.data.code == 200) {
        }
        })
        .catch(function(error) {
            console.log(error);
        });
    } 
  }
}
</script>
<style scoped>
#text{
  background: #fff;
  margin: 20px;
  padding: 20px
}
</style>

效果展示

将表单内容以formdata形式传参

newForm(){
    var vm=this; 
    var upData = new FormData();
    this.$refs.upload.submit(); 
    this.file.forEach(function (file) {
        upData.append('file', file, file.name); 
    })
    Object.keys(vm.newData).forEach(function(key){
      upData.append(key, vm.newData[key]); 
      console.log(key,vm.newData[key])
    });
    request
    .post('http://202.41.241.221:9095/uploader/uploadFile',upData)
    .then(function(response) {
    if (response.data.code == 200) {
    }
    })
    .catch(function(error) {
        console.log(error);
    });
} 

效果展示