vue--elementui---upload(三个单独组件),formData类型

需求是一个页面中有一个表单，里面有三个formitem，前两行是输入框，最后一行是三个upload组件（单独的）,在上传图片以后图片只是显示，但是不会直接发送到服务器

 放上代码

<template>
  <div class="upload_person">
    <el-form label-position="right" label-width="220px" :model="formLabelAlign" :rules="formLabelAlignMsg" ref="formLabelAlign">
      <el-form-item label="真实姓名" prop="name">
        <el-input v-model="formLabelAlign.name" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="申办人身份证号码" prop="region">
        <el-input v-model="formLabelAlign.region" placeholder="请输入申办人身份证号码"  maxlength="18"></el-input>
      </el-form-item>
      <el-form-item class="uploadshenfen"  ref='uploadref' label="上传身份证" prop="uploadImage">
          <el-upload
            class="avatar-uploader"
            action="#"  
            :show-file-list="false"
            ref="upload"
            :before-upload="beforeAvatarUpload"
            :on-change = "change1"
            :auto-upload="false"
          >
          <!-- 需要进行判断才能显示图片 -->
          <img v-if="formLabelAlign.imageUrl1" :src="formLabelAlign.imageUrl1" class="avatar">
          <div v-else style="position: absolute;">
              <img
              src="../../assets/img/upload/shenfenzhengrenmian.png"
              style="height:46px;46px;margin-top:16px;margin-left:43px;"
            />
             <div style="margin-top:-30px;margin-left:42px;">
              身份证人面像
            </div>
          </div>
        
            
          </el-upload>
          <el-upload
            style="margin-left:-26px !important;"
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            ref="upload"
            :before-upload="beforeAvatarUpload"
            :on-change = "change2"
　　　　　　　　//取消立马上传，这样下面的逻辑才写的通
            :auto-upload="false"
          >
          <img v-if="formLabelAlign.imageUrl2" :src="formLabelAlign.imageUrl2" class="avatar">
          <div v-else style="position: absolute;"> 
               <img
              src="../../assets/img/upload/shenfenzhengguohuimian.png"
              style="height:46px;46px;margin-top:16px;margin-left:43px;"
            />
             <div style="margin-top:-30px;margin-left:42px;">
              <span>身份证国徽面</span>
            </div>
          </div>
          </el-upload>
          <el-upload
            style="margin-left:-26px !important;"
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            ref="upload"
            :before-upload="beforeAvatarUpload"
            :on-change = "change3"
          >
           <img v-if="formLabelAlign.imageUrl3" :src="formLabelAlign.imageUrl3" class="avatar">
           <div  v-else style="position: absolute;">
              <img
              src="../../assets/img/upload/shouchishenfenzheng.png"
              style="height:46px;46px;margin-top:16px;margin-left:43px;"
            />
          <div style="margin-top:-30px;margin-left:42px;">
              <span>手持身份证照</span>
            </div>
           </div>
          </el-upload>
      </el-form-item>
    </el-form>
    
    <div style="margin-left:85px;">
      <div style="float:left;">
          <div><span style="font-size: 14px;color: #606266;margin-left:28px;">身份证资料示例</span></div>
          <div><span style="font-size: 10px;color: #797979;">(点击图片可以查看大图)</span></div>
      </div>
      <div  style="float:left;margin-left:33px;cursor: pointer;"> 
        <el-image 
          @click="dialogFace = true"
          style="164px; height: 100px"
          :src="url">
        </el-image>
        <el-image
        @click="dialogGuohui = true" 
          style="164px;height:100px;margin-left:2px;"
          :src="url2" >
        </el-image>
          <el-image 
          @click="dialogShouchi = true"
            style=" 164px; height: 100px;margin-left:2px;"
            :src="url3">
          </el-image>
      </div>
    </div>



    <div style="margin-top:150px;" class="upload_person_p">
        <div>1. 请上传本人身份证正反面照片</div>
        <div>2. 照片中本人形象需为免冠且并未化妆，五官清晰</div>
        <div>3. 拍照时对焦点请置于身份证上，保证身份证信息清晰且未遮挡</div>
        <div>4. 上传文件格式支持png，jpg和jpeg</div>
        <div>5. 文件大小不超过3MB</div>
        <div>6. 所有上传信息均会被纸贵版权妥善保管，不会用于其他商业用途或传输给其他第三方</div>
    </div>
    <el-button type="primary" class="uploadbtn" @click="submit('formLabelAlign')">提交</el-button>
        
      <el-dialog
        :visible.sync="dialogFace">
         <el-image 
          :src="url4" >
        </el-image>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogGuohui">
         <el-image 
          :src="url5" >
        </el-image>
      </el-dialog>
      <el-dialog
        :visible.sync="dialogShouchi">
         <el-image :src="url6"  style=" 800px; height: 600px" >
        </el-image>
      </el-dialog>
  </div>
</template>
<script>
import { shouchidatu , guohuidatu , zhengliandatu , shouchixiaotu , guohuixiaotu , zhenglianxiaotu } from '@/assets'
import { validName,validId,validHongkongId,validTaiwanId,validMacaoId } from '@/config/validate.js';
import config from '@/config'
import '@/assets/css/upload/upload_person.css'
export default {
  data() {
    var checkUserName = (rule, value, callback) => {
          if (!value || !value.trim()) {
              this.formLabelAlign.name = ""
              callback(new Error('姓名不能为空'));
          }else if(!validName(value)){
              callback(new Error('您输入的姓名格式不对'));
          }else{
            callback()
        }
        };

    var validateUserId = (rule, value, callback) => {
      if (!value || !value.trim()) {
          this.formLabelAlign.name = ""
          callback(new Error('身份证不能为空'));
          //判断大陆港澳台身份证
      }else if (!validId(value) && !validHongkongId(value) && !validTaiwanId(value) && !validMacaoId(value) ){
        callback(new Error("您输入的身份证不合法"))
      } else {
        callback()
      }
    };
    var validateUploadImg = (rule, value, callback) => {
      //判断三个图片路径为空的时候就提示验证信息
      if (this.formLabelAlign.imageUrl == ''|| this.formLabelAlign.imageUrl2 == '' || this.formLabelAlign.imageUrl3 == '') {
          callback(new Error('上传图片信息不足'));
      }else {
        callback()
      }
    };
    return {
      imgUrl:config.KEY.URL_FILE+"/UserAuth",
      dialogShouchi:false,
      dialogGuohui:false,
      dialogFace: false,
      formLabelAlign: {
        name: "胡冲",
        region: "411381200009023013",
        imageUrl1: "",
        imageUrl2: "",
        imageUrl3: "",
      },
      file1:'',
      file2:'',
      file3:'',
      url: zhenglianxiaotu,
      url2:guohuixiaotu,
      url3:shouchixiaotu,
      url4:zhengliandatu,
      url5:guohuidatu,
      url6:shouchidatu,
      srcList: [guohuidatu,zhengliandatu],
      formLabelAlignMsg: {
        name: [{required: true,validator: checkUserName, trigger: "blur"}],
        region: [{required: true,validator: validateUserId, trigger: "blur" }],
        uploadImage:[{required: true,validator: validateUploadImg, trigger: "blur" }],
      },
    };
  },
  methods: {
    submit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
              //利用formData的格式给后端发送请求
              var formData = new FormData();
              //声明一个对象接受，让其变为数组形式
              // var files = {
              //   "faceFile":this.file1,
              //   "backFile":this.file2
              // };
              // console.log(files)
              //不用数组的形式,接口里面的json格式会发生变化

              formData.append("faceFile",this.file1)
              formData.append("backFile",this.file2)

              //给formData对象追加属性以及属性值
              // formData.append("files",files)
              console.log(formData.get("faceFile"))
              

              // var userAuthInfo = {
              //   userId:1,
              //   idCard:"暗暗",
              //   realName:"4113812000"
              // }

              // console.log(JSON.stringify(userAuthInfo))
              // formData.append("userAuthInfo",userAuthInfo)
              formData.append("userId",1)
              formData.append("idCard","4113812000093")
              formData.append("realName","暗暗")
　　　　　　　　//本来设置了请求头，但是如果是formData对象的话，请求头是固定的，不能更改，所以这部分设置头部代码没用(但是放上供参考)
              this.$axios.post(config.KEY.URL_FILE+"/UserAuth",formData,{   
                headers:{
                  'Content-Type':'application/x-www-form-urlencoded'
                }
              }).then(res =>{
                console.log(res)
              }).catch(err =>{
                  console.log(err)
                  this.$message({ message: "服务器错误"});
              })
            } else {
              return false;
            }
      })
    },
    //改变的时候把这个文件流进行赋值
    change1(file){
      this.file1 = file.raw;
       this.formLabelAlign.imageUrl1 = URL.createObjectURL(file.raw);
//每次改变的时候就删除验证

this.$refs.uploadref.clearValidate();

},

    change2(file){
      this.file2 = file.raw;
      this.formLabelAlign.imageUrl2 = URL.createObjectURL(file.raw);

　　　　this.$refs.uploadref.clearValidate();

}, 
change3(file){ 
　　　　this.file3 = file.raw;
　　　　//把image显示的路径放在改变的方法中，当发生改变的时候就可以直接让图片显示，action里面就可以随便写不影响了
      this.formLabelAlign.imageUrl3 = URL.createObjectURL(file.raw);

　　　　this.$refs.uploadref.clearValidate();

},

//限制用户上传的图片格式和大小  
beforeAvatarUpload(file) { 

// console.log(file) 

const isJPG = file.type === "image/jpeg"; 

const isLt2M = file.size / 1024 / 1024 < 2; 

if (!isJPG) { this.$message.error("上传头像图片只能是 JPG 格式!"); } 

if (!isLt2M) { this.$message.error("上传头像图片大小不能超过 2MB!"); } 

return isJPG && isLt2M; // return false  } 
}, 

//解决点击完查看大图以后页面样式display变成overflow的bug  
watch:{ dialogShouchi(){ if(!this.dialogShouchi){ document.body.style = ""; } }, dialogGuohui(){ if(!this.dialogGuohui){ document.body.style = ""; } }, dialogFace(){ if(!this.dialogFace){ document.body.style = ""; } } } }; 

</script> 
<style> 
</style>