vue+elementUI实现表单和图片上传及验证功能示例

2020-06-16 05:57:10易采站长站整理

this.addKeyPersonForm.file = file.url
this.doUpload = true
this.$refs['addKeyPersonForm'].validateField('file')
},
// 阻止upload的自己上传,进行再操作
beforeupload (file) {
this.formData.append('file', file)
return false
},
// 上传重点人员信息
onSubmit: function () {
let that = this
that.formData = new FormData()
that.rules.file = [{ required: true, message: '请上传图片' }] 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() // 提交时触发了before-upload函数
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({