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

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: '请填写正确格式'
})
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>

希望本文所述对大家vue.js程序设计有所帮助。