实现的功能：
1、表单数据提交，
2、表单中携带文件附件。
3、附件上传过程中进度提示。
前端使用：vue + elementui + axios
后端使用：springboot
介绍之前，先学习2个小技巧设置
1、全局loading弹框定义使用
创建一个loading.js文件：
import {
Loading} from 'element-ui'
const loading = function(text) {
return Loading.service({
lock: true,
text: text,
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
};
export default loading;
在vue的script里面导入：
import loading from '../loading';
显示loading const _loading = loading(
作品附件上传中，请稍后...) 关闭loading
_loading.close(); // 关闭加载框 更新文字
_loading.setText(‘作品上传中，进度：’ + this.progressPercent + “%”) //更新dialog进度，优化体验
2、legend线条的颜色设置
legend需要在fieldset里面，所以设置fieldset就可以。设置颜色和边框圆角
fieldset {
border:2px solid #DCDFE6; text-align:left; border-radius: 8px;
}
下面介绍2种上传文件附件的方法：
1、vue + elementui + axios上传文件的第一种方式
通过选择文件触发对应的钩子回调函数，在回调中给全局的file赋值（特别注意raw），提交的时候使用这个File类型文件。
SpringBoot的接口写法
@Transactional
@ApiOperation(notes = "报名参加接口", value = "报名参加接口", httpMethod = "POST")
@PostMapping(value = "/apply",produces = "application/json;charset=UTF-8")
public Result apply(RegistrationInfo registrationInfo, @RequestParam(value = "files")MultipartFile files){
//同时接收RegistrationInfo这个bean参数和参数名为files的MultipartFile类型参数。
//我们使用DataForm，格式提交就可以。
...
}
vue的代码
<el-form-item label="作品上传：" prop="files" size = 'small' >
<el-upload
ref="upload_attach"
class="upload-demo"
action="/user/apply"
multiple
accept=".zip,.rar,.7z"
:limit="1"
:on-change="changFile"
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">注:上传的文件须是压缩文件格式，且不超过50M</div>
</el-upload>
</el-form-item>
备注：**:on-change=“changFile”，在选取文件后，通过在changFile回调中给全局变量files赋值。**实际测试只有这个方法回调成功
methods中定义的方法
changFile(file, fileList) {
console.log(fileList);
//选择文件后，给fileList对象赋值
this.fileList = fileList
},
提交上传：
apply(){
let data = new FormData();
// todo 非常重要，一定要加file.raw，从浏览器中查看需要使用binary类型，后台才能正确接收
this.form.files = this.fileList[0].raw
console.log(this.fileList[0].raw)
// 将form表单中的值都赋值给FormData传递给后台
for(let key in this.form){
console.log(this.form[key])
data.append(key,this.form[key])
}
this.$axios
.post('/user/apply',data,{
headers: {
'Content-Type': 'multipart/form-data'
}})// 第一种，直就传个json数据，不需要设置headers
// .post('/user/apply',this.form)// 第三种，可以直接传递这个form（推荐）
.then(resp => {
console.log('请求本地接口OK')
console.log(resp)
if(resp.data.code == -1){
// 接口返回-1，就是注册失败，提示消息提示用户
this.$message({
message: resp.data.msg,
type: 'error'
});
} else if(resp.data.code == 0){
console.log(resp.data)
//注册成功
this.$message({
message: "报名成功",
type: 'success'
});
// 跳转到登录页面
// this.$router.push('/login')
}
})
.catch(function (error) {
// 请求失败处理
console.log('请求本地接口失败' + error);
});
},
测试功能OK
特别需要注意：这样才能取到文件对象
this.form.files = this.fileList[0].raw
2、vue + elementui + springboot 上传文件的第二种方式
通过调用el-upload的submit方法，触发自定义函数，拿到param里面的File参数。
this.form.files = param.file // 将form中的files字段赋值File对象
实现的功能：
- 表单校验
- 添加删除附件时，附件规则校验，及时提醒用户
- 报名时，使用loading提示用户
- loading中显示上传的百分比
前端完整的代码：
<template>
<div class='myelement' v-show = body_show>
<p>报名页面</p>
<el-form ref="form" :model="form" label-width="130px" :rules="rules" >
<fieldset style="width:40%;" >
<legend >个人信息</legend>
<!-- 姓名 -->
<el-form-item label="姓名：" prop="apply_person_name" size = 'small' >
<el-input v-model="form.apply_person_name" placeholder="请输入姓名" class="input_width"></el-input>
</el-form-item>
</fieldset>
<br