天天看点

antd-vue upload 上传前验证

<a-form-model ref="form" :model="form" layout="horizontal" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="论证结果" prop="lzResult"
                         :rules="{required:true,message:'请选择结果'}">
        <j-dict-select-tag v-model="form.lzResult" :type="'radio'" dictCode="expert_lz_result"/>
      </a-form-model-item>
      <a-form-model-item label="内容" prop="lzResultContent"
                         :rules="{required:true,message:'请输入内容'}">
        <a-textarea placeholder="论证结果" v-model="form.lzResultContent" :rows="10"/>
      </a-form-model-item>
      <a-form-model-item label="附件" prop="lzResultFile"
                         :rules="{required:true,message:'请上传论证报告'}">
        <a-upload :showUploadList="false" :multiple="false"
                  :headers="tokenHeader" :action="url.uploadUrl"
                  :accept="accept" :data="{biz:'lzresult'}"
                  :before-upload="beforeUpload" @change="handleChangeUpload">
          <a-button>
            <a-icon type="upload"/>
            选择文件
          </a-button>
        </a-upload>
        <a v-if="form.lzResultFile" @click="downFile(form.lzResultFile)">下载</a>
      </a-form-model-item>
    </a-form-model>      
上传前:
 beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.form.lzResultFile = file.name //设置个临时值,用来通过form验证
        this.$refs.form.validate((valid) => {
          if (valid) {
            let index = file.name.lastIndexOf('.')
            let type = file.name.substring(index + 1)
            type = '.' + type
            if (this.fileType.indexOf(type) >= 0) {
              resolve()
            } else {
              this.$message.error('上传的文件格式不符合系统要求')
              reject()
            }
          } else {
            reject()
          }
        })
      })
    },

上传发生变化:
handleChangeUpload(info) {
      if (!info.file.status) {
        info.fileList.pop()
      }
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} 上传成功`)
        this.form.lzResultFile = info.file.response.message //保存的文件路径赋值给界面变量
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败`)
      }
    },