1. 程式人生 > 實用技巧 >Element-ui中為Upload 上傳新增表單校驗

Element-ui中為Upload 上傳新增表單校驗

本人CSDN地址:連結

template內

      <el-form-item label="檔案上傳" prop="fileList">
        <el-upload
          class="upload-demo"
          :data="upLoadData"
          :action="upLoadUrl"
          :on-remove="upLoadRemove"
          :on-success="upLoadSuccess"
          :file-list="fileList">
          <el-button size="small" type="primary">上傳附件</el-button>
        </el-upload>
      </el-form-item>

script內

  export default {
    data () {
      var validateAttach = (rule, value, callback) => {
        if (this.fileList.length === 0) {
          callback(new Error('附件不能為空'))
        } else {
          let notNull = false
          for (let index = 0; index < this.fileList.length; index++) {
            if (this.fileList[index].isDel === 0) {
              notNull = true
            }
          }
          if (notNull) {
            callback()
          } else {
            callback(new Error('附件不能為空'))
          }
        }
      }
      return {
        visible: false,
        addLoading: false,
        dataFormLoading: false,
        // 檔案上傳路徑
        upLoadUrl: this.$http.adornUrl(`/business/sysattach/upload`),
        // 檔案上傳攜帶的資料
        upLoadData: {
          'teacherCode': this.$store.state.user.id,
          'fileType': '/TH/',
          'token': this.$cookie.get('token')
        },
        // 附件物件集合
        fileList: [],
        dataForm: {
          thId: 0,
          name: '',
          grantUnit: '',
          honorTime: '',
          grade: '',
          rank: ''
        },
        dataRule: {
          name: [
            {required: true, message: '榮譽稱號不能為空', trigger: 'blur'}
          ],
          grantUnit: [
            {required: true, message: '授予單位不能為空', trigger: 'blur'}
          ],
          honorTime: [
            {required: true, message: '獲得時間不能為空', trigger: 'blur'}
          ],
          grade: [
            {required: true, message: '授予等級 國家級等不能為空', trigger: 'blur'}
          ],
          rank: [
            {required: true, message: '授予等次 一等獎等不能為空', trigger: 'blur'}
          ],
          fileList: [
            {validator: validateAttach, trigger: 'blur'}
          ]
        }
      }
    }
}