vue + elementui + axios表单数据和文件上传

实现的功能：
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