此文，主要讲解element ui的文件上传功能，以及 文件+表单一起作为参数被后端接收的内容 。

！！！下面是代码

vue-element ui -axios代码

<template>
<div class="fileUpLoad">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 文件上传 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="container">
<div class="query-condition">
<!-- 表单数据+上传文件 -->
<el-form ref="form" :model="form" label-width="130px" :rules="rules">
<el-form-item label="描述：" prop="ruleDesc" size="small">
<el-input v-model="form.ruleDesc" placeholder="请进行描述" class="input_width"></el-input>
</el-form-item>
<el-form-item ref="upload_attach_item" label="文件上传：" prop="file" size="small">
<!-- accept=".xls,.xlsx" 默认选择上传文件的类型 -->
<!-- :limit="1" 限定上传文件的数量 -->
<!-- ref="upload_attach" 绑定属性，本地上传文件，会把文件存到let file = this.$refs.upload_attach.uploadFiles里 -->
<!-- :on-change=“changFile”，在选取文件后，通过在changFile回调中给全局变量files赋值 -->
<!-- :on-exceed="handleExceed" 错误提示，最多上传一个文件 -->
<!-- :file-list="fileList" 将选择的文件赋值给它 -->
<!-- :auto-upload="false" 不立即上传 -->
<!-- :action是后端目标接口地址，但是由于使用了:http-request，所以这里填什么都无所谓了 -->
<!-- :http-request="uploadSectionFile"参数处理,跨域处理 -->
<el-upload
ref="upload_attach"
class="upload-demo"
action="/user/apply"
multiple
accept=".xls,.xlsx"
:limit="1"
:on-change="changFile"
:on-exceed="handleExceed"
:on-remove="removeFile"
:file-list="fileList"
:auto-upload="false"
:http-request="uploadSectionFile"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传.xls/.xlsx文件</div>
</el-upload>
<br />
<div style="text-align: left">
<el-button type="primary" v-on:click="onSubmit('form')">上传</el-button>
</div>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { uploadFile } from '@/api/fileUpLoad.api';
export default {
data() {
//验证是否上传了文件
var validateAttach = (rule, value, callback) => {
console.log('校验fileList上传文件长度', this.fileList.length);
if (this.fileList.length == 0) {
callback(new Error('请上传文件'));
} else {
callback();
}
};
return {
result: {
isMark: false,
msg: ''
},
form: {
loginName: this.$store.getters.getAuthsFn.userInfo.userName,
ruleDesc: '',
file: null
},
fileList: [],
show_progress:false,
rules: {
// 对上传的文件进行验证：必须上传，否则弹出“请上传文件”
file: [{ validator: validateAttach }],
// ruleDesc: [{
message: '请输入规则描述', trigger: 'blur' }]
}
};
},
created() {},
methods: {
changFile(file, fileList) {
//上传文件时触发
// 参数file代表的是当前的文件
//参数fileList代表的是传的总文件是数组
//获取传递的总文件
this.fileList = fileList;
this.$refs.upload_attach_item.validate();
console.log('触发文件上传时', this.$refs.upload_attach_item);
},
removeFile(file, fileList) {
//删除上传的文件后会触发
this.fileList = fileList;
this.$refs.upload_attach_item.validate();
console.log('文件移除时触发', this.$refs.upload_attach_item.validate());
},
handleExceed(files, fileList) {
//文件上传发生错误时触发
this.$message.warning(`当前限制最多选择 1 个文件`);
},
onSubmit(formName) {
console.log('点击提交时触发--');
// 校验合法性
this.$refs[formName].validate((valid) => {
if (valid) {
this.$refs.upload_attach.submit(); // 触发调用uploadSectionFile，拿到param参数里面的FileList
} else {
this.$message({
message: '请填写完整信息再后提交',
type: 'error'
});
return false;
}
});
},
uploadSectionFile(param) {
//整理上传参数
let data = new FormData();
//获取文件
this.form.file = param.file;
//将form表单的值全部赋给formdata传给后台
for (let key in this.form) {
data.append(key, this.form[key]);
}
//配置header
const config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
//axios请求
uploadFile(data, config).then((res) => {
console.log('zsj-后端返回的是：', res);
if (res.data.code == 200) {
//上传成功清空数据
this.form.ruleDesc = '';
this.fileList = [];
}
});
}
}
};
</script>
<style lang="less">
.rulesFileUpLoad {
.container {
.query-condition {
border: 1px solid rgba(148, 148, 148, 0.5);
// background-color: #dddddd;
border-radius: 2px;
padding: 10px;
margin: 10px 0;
.el-form-item__label{
font-size: 16px;
}
.el-row {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
.el-col {
line-height: 30px;
display: flex;
justify-content: flex-end;
}
}
.file-col {
padding-left: 0;
}
}
}
}
</style>

前端 api：import { uploadFile } from '@/api/fileUpLoad.api';

import http from '../../http';
//上传 文件+表单
export const uploadFile = (formData, config) => {
return http.post(`http://localhost:8080/路径`, formData,config)
}

后端api

public Result receiveFiles(@RequestParam("file")MultipartFile file , InputParamModel inputParamModel) {
}

最后

以上就是热情西牛最近收集整理的关于vue-element ui-axios-springboot环境：文件和表单上传后端此文，主要讲解element ui的文件上传功能，以及 文件+表单一起作为参数被后端接收的内容 。vue-element ui -axios代码前端 api：import { uploadFile } from '@/api/fileUpLoad.api';的全部内容，更多相关vue-element内容请搜索靠谱客的其他文章。