form表单提交（包含文件）

主要是提交事件 里边包含文件 怎样向后台提交文件

 

 

<el-form :model="ImpForm" enctype='multipart/form-data'>

<el-form-item label="Excel文件" :label-width="formLabelWidth">

<el-input v-model="ImpForm.name" autocomplete="off"></el-input>

<el-upload

class="upload-demo"

ref="upload"

:on-change="cert_path_file"

:file-list="ImpForm.cert_path"

:http-request="handleFile"

:multiple="false"

:limit="1"

action="@/views/bankBillUp">

<el-button slot="trigger" size="small" type="primary" @click="clearUploadedImage('upload')">浏览</el-button>

<el-button type="primary" @click="DownloadTemp">下载导入模板</el-button>

<div slot="tip" class="el-upload__tip">请选择需要导入的文件</div>

</el-upload>

</el-form-item>

<el-form-item>

<el-button @click="dialogFormVisible = false">取 消</el-button>

<el-button type="primary" @click="onSubmit">提 交</el-button>

</el-form-item>

</el-form>

 

 

 

 

ImpForm: {

name: '',

cert_path: [],

file:{}

},

 

 

// 导入 浏览 上传 on-change事件

cert_path_file (file,fileList) {

console.log(file.raw)

// 上传组件 on-change 事件

this.ImpForm.file = file.raw

this.ImpForm.name = file.name;

},

handleFile(){},

// 重新选择文件时，清空文件列表

clearUploadedImage (type) {

// 重新选择文件时清空文件列表

if (type === 'upload') {

this.$refs.upload.clearFiles();

this.cert_path = [];

}

},

// 导入提交事件；

onSubmit(val){

let config = {

headers: {

'Content-Type': 'multipart/form-data'

}

}

var formdata = new FormData();

formdata.append('file',this.ImpForm.file);

apiSubmit(formdata,config).then(response => {

console.log(response)

if (response && response.data) {

this.ImpForm.name = ""

}

}).catch()

this.dialogFormVisible = false;

},