vue+ant_图像文件的上传保存为Base64格式

问题
点击表单中的上传按钮，实现格式为png/jpg/jpeg，大小为5KB~20KB大小的图像的上传,要求数据库中保存的文件为Base64格式。
实现如下图：

解决：

 
            
               点击上传 
            
          

可参考Ant Design of Vue 官网
beforeUpload对上传文件格式和大小进行限制

//文件类型和大小
    beforeUpload(file, fileList) {
      if (fileList.length === 1) {
        this.isDisabled = true
      }else{
        this.isDisabled = false
      }
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png' // file.type === 'image/bmp'
      const isLt2M = file.size / 1024 < 200 && file.size / 1024 > 5
      if (isJPG) {
        if (isLt2M) {
          return isJPG && isLt2M
        } else {
          this.$message.error('文件大小应在5KB~20KB之间')
        }
      } else {
        this.$message.error('文件格式不对')
      }
    },

提交表单，获取文件名和文件的Base64格式字符串传到后台

//保存表单数据
    saveDate() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          console.log('values', values)
          if(values.supplierWorkNo == ' ' || values.serialNo == ' ' || values.materialName == ' '){
            this.$notification.error({ message: '数据不能为空' })
          }else{
           const  checkResultName = values.checkResult[0].name//注释：文件名
          values.checkTime = moment(values.checkTime).format('YYYY-MM-DD HH:mm:ss')
          values.putCenterTime = moment(values.putCenterTime).format('YYYY-MM-DD HH:mm:ss')
          values.checkResult = checkResultName +";"+values.checkResult[0].thumbUrl
          console.log(values.checkResult);
          const param = Object.assign(values)
          try {
            await this.$http.post(experimentApi.saveDate, param)
            this.$notification.success({ message: '保存成功' })
            this.isDisabled = false
          } catch{
            this.$notification.error({ message: '保存失败' })
            this.isDisabled = false
          }
          finally {
            this.loading = false
            this.form.resetFields()
          }      
          }
        }
      })
    },