[JavaScript知识库]Element和iview Upload验证

1. element

<el-form-item label="上传附件" prop="fileList">
  <el-upload
    :on-success="upSuccess"  // 上传成功触发
    :file-list="inputForm.fileList" // 文件列表>
   	<el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</el-form-item>

data () {
	return {
		inputForm: {
          fileList: [] // 文件列表绑定
        },
        rules: {
          fileList: [{
            message: '请上传附件',
            trigger: 'change',
            required: true
          }]
        }
	}
}

upSuccess (file, fileList) {
  this.inputForm.fileList.push(fileList) // 添加到文件列表中
  this.$refs.inputForm.validateField('fileList') // 上传成功清除单个验证
}

2. iview

<FormItem label="附件:" prop="fileList">
  <Upload
    v-model="tableList.fileList"
    :on-success="handleFileLoadSuccess"
  ><Button type="primary">上传</Button></Upload>
</FormItem>

const validateUpload = (rule, value, callback) => {
  if (this.attachmentIDs.length>0) {
    callback();
  } else {
    callback(new Error('请选择要上传的文件'));
  }
}

data () {
	return {
		tableList: {
        	fileList: null
      	},
      	attachmentIDs: [], // 附件
      	rules: {
          fileList: [{ required: true, validator: validateUpload, trigger: 'change' }]
        }
	}
}

handleFileLoadSuccess(response, file, fileList){
   this.attachmentIDs.push(file)
}

另外列表关闭时需要清除,在Model上面加上@on-visible-change="ModelSaveclose"
ModelSaveclose() {
   this.tableList.fileList = null
   this.attachmentIDs = []
},

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖