vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能示例

更新時(shí)間：2019年05月14日 11:50:39 作者：辣姐什么鬼

這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能,結(jié)合實(shí)例形式分析了vue+elementUI表單相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue+elementUI實(shí)現(xiàn)表單和圖片上傳及驗(yàn)證功能。分享給大家供大家參考，具體如下：

最終實(shí)現(xiàn)需求如下圖：

form表單內(nèi)容與重點(diǎn)人員圖片同時(shí)上傳且圖片為必填項(xiàng)

分析彈框頁(yè)需要解決的問(wèn)題有：

1、表單內(nèi)容的驗(yàn)證及必填項(xiàng)

2、新增和編輯用同一個(gè)組件如何處理數(shù)據(jù)

3、圖片需要和信息一起傳遞（即不允許自動(dòng)上傳）

4、圖片必填的驗(yàn)證問(wèn)題

針對(duì)上述問(wèn)題作出方案：

1、el-form的表單驗(yàn)證需要注意幾個(gè)地方：

a：el-form-item的prop值需要和表單標(biāo)簽的v-model值保持一致

例如：

<el-form-item label="姓名：" prop="name">
 <el-input style="width:1rem;" v-model="addKeyPersonForm.name" placeholder="請(qǐng)輸入姓名"></el-input>
</el-form-item>

b：驗(yàn)證規(guī)則有直接用element官網(wǎng)提供的也有自定義的

例如：其中checkNumber就是自定義的驗(yàn)證數(shù)字的正則

rules: { // 表單驗(yàn)證
 name: [
  { required: true, message: '必填項(xiàng)', trigger: 'blur' }
 ],
 age: [
  { required: true, message: '必填項(xiàng)', trigger: 'blur' },
  { validator: checkNumber, trigger: 'blur' }
 ],
 sex: [
  { required: true, message: '必填項(xiàng)', trigger: ['blur', 'change'] }
 ],
 nationlity: [
  { required: true, message: '必填項(xiàng)', trigger: ['blur', 'change'] }
 ],
 userType: [
  { required: true, message: '必填項(xiàng)', trigger: ['blur', 'change'] }
 ],
 idCard: [
  { required: true, message: '必填項(xiàng)', trigger: 'blur' },
  { validator: checkIdCard, trigger: 'blur' }
 ],
 registered: [
  { required: true, type: 'array', message: '必填項(xiàng)', trigger: ['blur', 'change'] }
 ],
 registeredDetails: [
  { required: true, message: '必填項(xiàng)', trigger: 'blur' }
 ],
 domicile: [
  { required: true, type: 'array', message: '必填項(xiàng)', trigger: ['blur', 'change'] }
 ],
 domicileDetails: [
  { required: true, message: '必填項(xiàng)', trigger: 'blur' }
 ],
 file: [
  { required: true, message: '請(qǐng)上傳圖片' }
 ],
 plateNumber: [
  { validator: checkPlateNum, trigger: 'change' }
 ]
}

2、新增和編輯問(wèn)題需要我們?cè)诖蜷_(kāi)組件的時(shí)候傳遞兩個(gè)值

props: {
 dialogType: { //是新增還是編輯，用于判斷
  type: String
 },
 keypersonList: { //表單的原始值
  type: Object
 }
}

3、圖片和form表單內(nèi)容一起上傳

首先我們需要阻止圖片的自動(dòng)上傳讓它等到我們點(diǎn)擊保存按鈕的時(shí)候再一起傳給后臺(tái)

我們看這段代碼就是圖片上傳組件

<el-upload class="upload-img"
      :style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
      ref="uploadxls"
      action="aaa"
      ::limit="1"
      :show-file-list="false"
      :on-change="handlePictureCardPreview"
      :before-upload="beforeupload"
      accept="image/png,image/gif,image/jpg,image/jpeg">
 <i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
 <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上傳照片</div>
</el-upload>

action我們隨便填一個(gè)就好，重點(diǎn)是這一句:before-upload="beforeupload"在圖片上傳之前執(zhí)行beforeupload方法在里面return false就可以實(shí)現(xiàn)阻止upload自動(dòng)上傳

// 阻止upload的自己上傳，進(jìn)行再操作
beforeupload (file) {
 this.formData.append('file', file)
 return false
}

關(guān)于圖片和表單文件一起上傳我們選擇了formData格式存儲(chǔ)數(shù)據(jù)用于上傳

選擇了圖片并填寫(xiě)必填信息之后點(diǎn)擊保存進(jìn)行上傳操作，在onSubmit方法里把表單信息都append到formData里that.$refs.uploadxls.submit() // 提交時(shí)觸發(fā)了before-upload函數(shù)--》完成圖片的上傳即執(zhí)行beforeupload方法

4、圖片必填的驗(yàn)證問(wèn)題：

a、如果沒(méi)有選擇圖片點(diǎn)擊保存則圖片提示：請(qǐng)上傳圖片

b、此時(shí)選擇了圖片則“請(qǐng)上傳圖片”消失

驗(yàn)證規(guī)則里有一條file就是做圖片必填驗(yàn)證的

file: [
 { required: true, message: '請(qǐng)上傳圖片' }
]

c、在編輯重點(diǎn)人員信息時(shí)重點(diǎn)人員圖片已存在沒(méi)有進(jìn)行圖片上傳操作此時(shí)點(diǎn)擊保存應(yīng)該不提示“請(qǐng)上傳圖片”，未解決這個(gè)問(wèn)題我們?cè)谏蟼鲿r(shí)添加判斷：

如果是編輯信息且未進(jìn)行過(guò)圖片上傳操作則去掉file驗(yàn)證

就是以下代碼

that.rules.file = [{ required: true, message: '請(qǐng)上傳圖片' }]
if (that.dialogType !== 'add' && !this.doUpload) {
 that.rules.file = []
 that.$refs['uploadElement'].clearValidate()
}

整個(gè)彈框組件的代碼如下：

<template>
  <div class="add-keyperson-dialog">
   <el-form :inline="true"
        ref="addKeyPersonForm"
        :model="addKeyPersonForm"
        class="demo-form-inline"
        label-width="1.4rem"
        :rules="rules">
    <el-form-item label="姓名：" prop="name">
     <el-input style="width:1rem;" v-model="addKeyPersonForm.name" placeholder="請(qǐng)輸入姓名"></el-input>
    </el-form-item>
    <el-form-item label="性別：" label-width="0.64rem" prop="sex">
     <el-select style="width:0.65rem;" v-model="addKeyPersonForm.sex" placeholder="請(qǐng)選擇">
      <el-option label="男" value="1"></el-option>
      <el-option label="女" value="2"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="年齡：" label-width="0.64rem" prop="age">
     <el-input style="width:0.65rem;" v-model="addKeyPersonForm.age" placeholder="請(qǐng)輸入"></el-input>
    </el-form-item>
    <el-form-item prop="file" class="upload-img-form" ref="uploadElement">
     <el-upload class="upload-img"
           :style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
           ref="uploadxls"
           action="aaa"
           ::limit="1"
           :show-file-list="false"
           :on-change="handlePictureCardPreview"
           :before-upload="beforeupload"
           accept="image/png,image/gif,image/jpg,image/jpeg">
      <i v-show="!dialogImageUrl" class="el-icon-upload avatar-uploader-icon"></i>
      <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上傳照片</div>
     </el-upload>
    </el-form-item>
    <!--<img :src="dialogImageUrl"/>-->
    <el-form-item label="身份證號(hào)：" prop="idCard">
     <el-input style="width:1.7rem;" v-model="addKeyPersonForm.idCard" placeholder="請(qǐng)輸入身份證號(hào)"></el-input>
    </el-form-item>
    <el-form-item label="國(guó)籍：" label-width="0.64rem" prop="nationlity">
     <el-select style="width:1.37rem;" v-model="addKeyPersonForm.nationlity" placeholder="請(qǐng)選擇">
      <el-option label="中國(guó)" value="中國(guó)"></el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="車(chē)牌號(hào)：" prop="plateNumber">
     <el-input style="width:1.7rem;" v-model="addKeyPersonForm.plateNumber" placeholder="請(qǐng)輸入車(chē)牌號(hào)"></el-input>
    </el-form-item>
    <el-form-item label="類(lèi)別：" label-width="0.64rem" prop="userType">
     <!--<el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="請(qǐng)選擇">
      <el-option label="精神病人" value="0"></el-option>
      <el-option label="涉毒" value="1"></el-option>
     </el-select>-->
     <el-select style="width:1.37rem;" v-model="addKeyPersonForm.userType" placeholder="請(qǐng)選擇">
      <el-option
       v-for="item in keyPersonType"
       :key="item.id"
       :label="item.dataValue"
       :value="item.dataKey">
       {{item.dataValue}}
      </el-option>
     </el-select>
    </el-form-item>
    <el-form-item label="戶(hù)籍地：" prop="registered">
     <!-- <el-select style="width:1.3rem;" v-model="addKeyPersonForm.huji" placeholder="請(qǐng)選擇">
      <el-option label="青島市" value="0"></el-option>
      <el-option label="北京市" value="1"></el-option>
     </el-select>-->
     <el-cascader style="width:1.3rem;"
            :options="options"
            placeholder="請(qǐng)選擇"
            v-model="addKeyPersonForm.registered"
            :rules="{type: 'array'}"
            @change="handleChange"
            :separator="' '">
     </el-cascader>
    </el-form-item>
    <el-form-item prop="registeredDetails">
     <el-input style="width:3.55rem;" v-model="addKeyPersonForm.registeredDetails" placeholder="請(qǐng)輸入詳細(xì)地址"></el-input>
    </el-form-item>
    <el-form-item label="居住地：" prop="domicile">
     <!--<el-select style="width:1.3rem;" v-model="addKeyPersonForm.juzhu" placeholder="請(qǐng)選擇">
      <el-option label="青島市" value="0"></el-option>
      <el-option label="北京市" value="1"></el-option>
     </el-select>-->
     <el-cascader style="width:1.3rem;"
            :options="options"
            placeholder="請(qǐng)選擇"
            :rules="{type: 'array'}"
            v-model="addKeyPersonForm.domicile"
            @change="handleChange"
            :separator="' '">
     </el-cascader>
    </el-form-item>
    <el-form-item prop="domicileDetails">
     <el-input style="width:3.55rem;" v-model="addKeyPersonForm.domicileDetails" placeholder="請(qǐng)輸入詳細(xì)地址"></el-input>
    </el-form-item>
    <el-form-item label="經(jīng)緯度：">
     <el-input style="width:5rem;" v-model="position" placeholder="請(qǐng)選擇經(jīng)緯度" @click.native="showPosition=true"></el-input>
    </el-form-item>
    <!--<el-form-item label="所屬人員庫(kù)：">
     <el-select style="width:4.75rem;" v-model="addKeyPersonForm.library" placeholder="請(qǐng)選擇">
      <el-option label="全國(guó)重點(diǎn)人員庫(kù)1" value="0"></el-option>
      <el-option label="全國(guó)重點(diǎn)人員庫(kù)2" value="1"></el-option>
     </el-select>
    </el-form-item>-->
    <el-form-item label="問(wèn)題及現(xiàn)實(shí)表現(xiàn)：" prop="problem">
     <el-input style="width:5rem;" v-model="addKeyPersonForm.problem" placeholder="請(qǐng)輸入問(wèn)題及現(xiàn)實(shí)表現(xiàn)"></el-input>
    </el-form-item>
    <el-form-item label="采取措施：" prop="measure">
     <el-input style="width:5rem;" v-model="addKeyPersonForm.measure" placeholder="請(qǐng)輸入措施"></el-input>
    </el-form-item>
    <el-form-item label="控制人員：" prop="controller">
     <el-table
      :data="addKeyPersonForm.controller"
      stripe
      height="1rem"
      style="width: 5rem;">
      <el-table-column
       prop="name"
       label="姓名"
       show-overflow-tooltip>
      </el-table-column>
      <el-table-column
       prop="sex"
       label="性別"
       width="60">
      </el-table-column>
      <el-table-column
       prop="birth"
       show-overflow-tooltip
       label="出生日期">
      </el-table-column>
      <el-table-column
       prop="post"
       show-overflow-tooltip
       label="職務(wù)">
      </el-table-column>
      <el-table-column
       prop="phone"
       show-overflow-tooltip
       label="聯(lián)系電話(huà)">
      </el-table-column>
      <el-table-column
       label="操作"
       width="60">
       <template slot-scope="scope">
        <el-button
         @click.native.prevent="deleteRow(scope.$index)"
         type="text"
         size="small">
         移除
        </el-button>
       </template>
      </el-table-column>
     </el-table>
     <el-button type="text" icon="el-icon-plus" @click="innerVisible = true">繼續(xù)添加</el-button>
    </el-form-item>
    <el-form-item label="備注：" prop="remark">
     <el-input style="width:5rem;" type="textarea" rows="1" v-model="addKeyPersonForm.remark" placeholder="請(qǐng)輸入備注"></el-input>
    </el-form-item>
    <el-form-item label="最后更新時(shí)間：" v-if="addKeyPersonForm.updateTime">
     <p style="width:4.7rem;">{{addKeyPersonForm.updateTime}}</p>
    </el-form-item>
    <el-form-item style="text-align:center;display:block;">
     <el-button type="primary" @click="onSubmit" :disabled="doSubmitFlag">保存</el-button>
    </el-form-item>
   </el-form>
   <!--添加控制人員彈框------------------開(kāi)始-->
   <el-dialog
    width="4.2rem"
    title="添加控制人員"
    v-if="innerVisible"
    :visible.sync="innerVisible"
    append-to-body
    :before-close="closeFun">
    <personnel-control-add @add-person="addPerson" ref="addForm"></personnel-control-add>
   </el-dialog>
   <!--添加控制人員彈框------------------結(jié)束-->
   <!--選擇經(jīng)緯度彈框------------------開(kāi)始-->
   <el-dialog
    width="5.1rem"
    title="選擇經(jīng)緯度"
    v-if="showPosition"
    :visible.sync="showPosition"
    append-to-body
    :before-close="closePosition">
    <personnel-add-position ref="addPosition" @add-position="addPosition" :position-form1="positionForm"></personnel-add-position>
   </el-dialog>
   <!--選擇經(jīng)緯度彈框------------------結(jié)束-->
  </div>
</template>

<script>
import options from '../../../static/js/country-data.js'
import PersonnelControlAdd from './PersonnelControlAdd.vue'
import axiosMap from './../../api/map'
import axiosControl from './../../api/control'
import PersonnelAddPosition from './PersonnelAddPosition.vue'
export default {
 components: {
  PersonnelAddPosition,
  PersonnelControlAdd},
 name: 'add-keyperson-dialog',
 props: {
  dialogType: {
   type: String
  },
  keypersonList: {
   type: Object
  }
 },
 computed: {
  position: { // 經(jīng)緯度
   // getter
   get: function () {
    let str = ''
    if (this.addKeyPersonForm.longitude !== '' && this.addKeyPersonForm.latitude !== '' && this.addKeyPersonForm.longitude !== null && this.addKeyPersonForm.latitude !== null) {
     str = this.addKeyPersonForm.longitude + ',' + this.addKeyPersonForm.latitude
    }
    return str
   },
   // setter
   set: function (newValue) {
   }
  }
 },
 /* watch: {
  keypersonList: { // 深度監(jiān)聽(tīng)，可監(jiān)聽(tīng)到對(duì)象、數(shù)組的變化
   handler (newQuestion, oldQuestion) {
    this.addKeyPersonForm = Object.assign({}, this.keypersonList)
    this.dialogImageUrl = Object.assign({}, this.keypersonList).iconUrl
   },
   deep: true
  }
 }, */
 data () {
  var checkNumber = (rule, value, callback) => {
   let regEn = /^[1-9]\d*$/
   if (!regEn.test(value)) {
    callback(new Error('正整數(shù)'))
   } else {
    callback()
   }
  }
  var checkIdCard = (rule, value, callback) => {
   let regEn = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
   if (!regEn.test(value)) {
    callback(new Error('請(qǐng)輸入正確身份證'))
   } else {
    // 校驗(yàn)位按照ISO 7064:1983.MOD 11-2的規(guī)定生成，X可以認(rèn)為是數(shù)字10
    // 下面分別分析出生日期和校驗(yàn)位
    let num = value.toUpperCase()
    let len, re
    len = num.length
    if (len === 15) {
     re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/)
     let arrSplit = num.match(re) // 檢查生日日期是否正確
     let dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
     let bGoodDay
     bGoodDay = (dtmBirth.getYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))
     if (!bGoodDay) {
      callback(new Error('請(qǐng)輸入正確身份證'))
     } else { // 將15位身份證轉(zhuǎn)成18位 //校驗(yàn)位按照ISO 7064:1983.MOD 11-2的規(guī)定生成，X可以認(rèn)為是數(shù)字10
      let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      var nTemp = 0, i
      num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6)
      for (i = 0; i < 17; i++) {
       nTemp += num.substr(i, 1) * arrInt[i]
      }
      num += arrCh[nTemp % 11]
      callback()
     }
    }
    if (len === 18) {
     re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/)
     let arrSplit = num.match(re) // 檢查生日日期是否正確
     let dtmBirth = new Date(arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4])
     let bGoodDay
     bGoodDay = (dtmBirth.getFullYear() === Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) === Number(arrSplit[3])) && (dtmBirth.getDate() === Number(arrSplit[4]))
     if (!bGoodDay) {
      callback(new Error('請(qǐng)輸入正確身份證'))
     } else { // 檢驗(yàn)18位身份證的校驗(yàn)碼是否正確。 //校驗(yàn)位按照ISO 7064:1983.MOD 11-2的規(guī)定生成，X可以認(rèn)為是數(shù)字10
      let valnum
      let arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      let arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
      var nTemp = 0, i
      for (i = 0; i < 17; i++) {
       nTemp += num.substr(i, 1) * arrInt[i]
      }
      valnum = arrCh[nTemp % 11]
      if (!isNaN(num.substr(17, 1))) {
       callback()
      }
      if (valnum !== num.substr(17, 1)) {
       callback(new Error('請(qǐng)輸入正確身份證'))
      }
     }
    }
   }
  }
  var checkPlateNum = (rule, value, callback) => {
   if (value && value !== '') {
    let regEn = /(^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領(lǐng)A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學(xué)警港澳]{1}$)/
    if (!regEn.test(value)) {
     callback(new Error('請(qǐng)輸入正確車(chē)牌號(hào)'))
    } else {
     callback()
    }
   } else {
    callback()
   }
  }
  return {
   doSubmitFlag: false,
   showPosition: false,
   doUpload: false,
   keyPersonType: [], // 重點(diǎn)人員類(lèi)型列表
   addKeyPersonForm: Object.assign({}, this.keypersonList),
   positionForm: {
    longtitude: this.keypersonList.longitude,
    latitude: this.keypersonList.latitude
   },
   options: options, // 存放城市數(shù)據(jù),
   innerVisible: false, // 繼續(xù)添加彈框
   dialogImageUrl: Object.assign({}, this.keypersonList).iconUrl, // 圖片
   formData: new FormData(),
   rules: { // 表單驗(yàn)證
    name: [
     { required: true, message: '必填項(xiàng)', trigger: 'blur' }
    ],
    age: [
     { required: true, message: '必填項(xiàng)', trigger: 'blur' },
     { validator: checkNumber, trigger: 'blur' }
    ],
    sex: [
     { required: true, message: '必填項(xiàng)', trigger: ['blur', 'change'] }
    ],
    nationlity: [
     { required: true, message: '必填項(xiàng)', trigger: ['blur', 'change'] }
    ],
    userType: [
     { required: true, message: '必填項(xiàng)', trigger: ['blur', 'change'] }
    ],
    idCard: [
     { required: true, message: '必填項(xiàng)', trigger: 'blur' },
     { validator: checkIdCard, trigger: 'blur' }
    ],
    registered: [
     { required: true, type: 'array', message: '必填項(xiàng)', trigger: ['blur', 'change'] }
    ],
    registeredDetails: [
     { required: true, message: '必填項(xiàng)', trigger: 'blur' }
    ],
    domicile: [
     { required: true, type: 'array', message: '必填項(xiàng)', trigger: ['blur', 'change'] }
    ],
    domicileDetails: [
     { required: true, message: '必填項(xiàng)', trigger: 'blur' }
    ],
    file: [
     { required: true, message: '請(qǐng)上傳圖片' }
    ],
    plateNumber: [
     { validator: checkPlateNum, trigger: 'change' }
    ]
   }
  }
 },
 created () {
  this.getKeyPersonType()
 },
 methods: {
  handleChange (value) {
  },
  // 獲取重點(diǎn)人員類(lèi)型
  getKeyPersonType: function () {
   let that = this
   let param = {
    typeCodes: 'userType'
   }
   axiosMap.getKeyPersonType(param)
    .then(res => {
     if (res.data.code === 200) {
      that.keyPersonType = res.data.rows['0'].userType
      that.keyPersonType.forEach(function (item) {
       if (that.addKeyPersonForm.userType === item.dataValue) {
        that.addKeyPersonForm.userType = item.dataKey
       }
      })
      // that.keyPersonType.unshift({dataValue: '全部', dataKey: ''})
     } else {
      that.$message.error({
       message: res.data.message
      })
     }
    })
  },
  // 添加控制人員
  addPerson (person) {
   this.addKeyPersonForm.controller.push(person)
  },
  // 添加經(jīng)緯度
  addPosition (position) {
   this.addKeyPersonForm.longitude = position[0]
   this.addKeyPersonForm.latitude = position[1]
   this.showPosition = false
  },
  // 刪除某個(gè)控制人員
  deleteRow (index) {
   this.addKeyPersonForm.controller.splice(this.addKeyPersonForm.controller[index], 1)
  },
  // 關(guān)閉新增控制人員
  closeFun () {
   this.$refs.addForm.$refs.controlForm.resetFields()
   this.innerVisible = false
  },
  // 關(guān)閉經(jīng)緯度
  closePosition () {
   // this.$refs.addPosition.$refs.addPosition.resetFields()
   this.showPosition = false
  },
  // 圖片預(yù)覽
  handlePictureCardPreview (file) {
   this.dialogImageUrl = file.url
   this.addKeyPersonForm.file = file.url
   this.doUpload = true
   this.$refs['addKeyPersonForm'].validateField('file')
  },
  // 阻止upload的自己上傳，進(jìn)行再操作
  beforeupload (file) {
   this.formData.append('file', file)
   return false
  },
  // 上傳重點(diǎn)人員信息
  onSubmit: function () {
   let that = this
   that.formData = new FormData()
   that.rules.file = [{ required: true, message: '請(qǐng)上傳圖片' }]
   if (that.dialogType !== 'add' && !this.doUpload) {
    that.rules.file = []
    that.$refs['uploadElement'].clearValidate()
   }
   that.$refs['addKeyPersonForm'].validate((valid) => {
    if (valid) {
     that.formData.append('name', that.addKeyPersonForm.name)
     if (that.addKeyPersonForm.sex === '男') {
      that.addKeyPersonForm.sex = 1
     } else if (that.addKeyPersonForm.sex === '女') {
      that.addKeyPersonForm.sex = 2
     }
     that.formData.append('sex', that.addKeyPersonForm.sex)
     that.formData.append('age', that.addKeyPersonForm.age)
     that.formData.append('idCard', that.addKeyPersonForm.idCard)
     that.formData.append('nationlity', that.addKeyPersonForm.nationlity)
     that.formData.append('plateNumber', that.addKeyPersonForm.plateNumber)
     that.formData.append('userType', that.addKeyPersonForm.userType)
     that.formData.append('longitude', that.addKeyPersonForm.longitude)
     that.formData.append('latitude', that.addKeyPersonForm.latitude)
     that.formData.append('registered', that.addKeyPersonForm.registered.join('-'))
     that.formData.append('registeredDetails', that.addKeyPersonForm.registeredDetails)
     that.formData.append('domicile', that.addKeyPersonForm.domicile.join('-'))
     that.formData.append('domicileDetails', that.addKeyPersonForm.domicileDetails)
     that.formData.append('problem', that.addKeyPersonForm.problem)
     that.formData.append('measure', that.addKeyPersonForm.measure)
     that.formData.append('controller', JSON.stringify(that.addKeyPersonForm.controller))
     that.formData.append('remark', that.addKeyPersonForm.remark)
     if (that.dialogType === 'add') {
      that.$refs.uploadxls.submit() // 提交時(shí)觸發(fā)了before-upload函數(shù)
      that.doSubmitFlag = true
      axiosControl.saveNewKeyPerson(that.formData)
       .then(res => {
        that.doSubmitFlag = false
        if (res.data.code === 200) {
         that.$message({
          type: 'success',
          message: '添加成功'
         })
         that.$refs.addKeyPersonForm.dialogImageUrl = 'none'
         that.$refs.uploadxls.clearFiles()
         that.$refs.addKeyPersonForm.resetFields()
         that.fileName = ''
         that.uploadForm = new FormData()
         that.$emit('savePersonSuccess')
        } else {
         that.$message.error({
          message: res.data.message
         })
        }
       })
       /* .catch(err => {
        that.$message.error({
         message: err
        })
       }) */
     } else {
      if (!that.doUpload) {
       that.formData.append('iconUrl', that.addKeyPersonForm.iconUrl)
      }
      // 還要傳id
      that.formData.append('id', that.addKeyPersonForm.id)
      that.doSubmitFlag = true
      axiosControl.saveEditKeyPerson(that.formData)
       .then(res => {
        that.doSubmitFlag = false
        if (res.data.code === 200) {
         that.$message({
          type: 'success',
          message: '添加成功'
         })
         that.$refs.addKeyPersonForm.dialogImageUrl = 'none'
         that.$refs.uploadxls.clearFiles()
         that.$refs.addKeyPersonForm.resetFields()
         that.fileName = ''
         that.uploadForm = new FormData()
         that.$emit('savePersonSuccess')
        } else {
         that.$message.error({
          message: res.data.message
         })
        }
       })
     }
    } else {
     this.$message({
      type: 'warning',
      message: '請(qǐng)?zhí)顚?xiě)正確格式'
     })
     return false
    }
   })
  }
 }
}
</script>

<style scoped>
 .add-keyperson-dialog{
  position:relative;
  height:7.2rem;
  overflow:auto;
 }
 .add-keyperson-dialog .demo-form-inline{
  font-size:0.13rem;
  color:#666;
 }
 /*上傳圖片樣式*/
 .add-keyperson-dialog .upload-img-form{
  width: 1rem;
  height: 1.35rem;
  position: absolute;
  right:0.2rem;
  top:0rem;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
 }
 .add-keyperson-dialog .upload-img{
  width: 1rem;
  height: 1.35rem;
  overflow:hidden;
 }
 .add-keyperson-dialog .upload-img:hover {
  border-color: #409EFF;
  color: #409EFF;
 }
 .add-keyperson-dialog .avatar-uploader-icon {
  position:relative;
  z-index:100;
  font-size: 0.3rem;
  color: #8c939d;
  width: 0.9rem;
  height: 1.35rem;
  line-height: 1rem;
  text-align: center;
 }
 .add-keyperson-dialog .upload-img:hover .avatar-uploader-icon {
  color: #409EFF
 }
 .add-keyperson-dialog .avatar {
  width: 100%;
  height: auto;
  display: block;
 }
 .add-keyperson-dialog .upload__tip {
  font-size: 0.13rem;
  text-align: center;
  position: relative;
  z-index:10;
  top: -0.7rem;
 }
</style>

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: