天天看點

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} 上傳失敗`)
      }
    },