我正在尝试在我的表单上验证上传的文档,并使用测量is和typescript使用自定义验证器,但验证器是在fileupload之后调用的,我想在上传之前验证文件类型。上传不支持的文件类型且未调用验证器时,API会抛出错误。在此之前,我如何验证和显示错误?谢谢
这是我的JSON
{
"name": "document",
"type": "file",
"title": {
"zh-cn": "6. 商业登记证",
"zh-tw": "6. 商業登記證",
"default": "6. Business registration certificate"
},
"maxSize": 10485760,
"isRequired": true,
"description": "{ \"type\": \"url\", \"label\": { \"default\": \"What does it look like?\", \"zh-cn\": \"这个文件是什么?\", \"zh-tw\": \"這個文件是什麼?\" }, \"value\": \"/assets/images/sample_BR.jpg\" }",
"acceptedTypes": ".pdf, .jpg, .png",
"requiredErrorText": {
"zh-cn": "请上传有效的公司商业登记证",
"zh-tw": "請上傳有效的公司商業登記證",
"default": "Please upload valid business registration certificate"
},
"allowImagesPreview": false,
"descriptionLocation": "underInput",
"validators": [{
"type": "expression",
"expression": "isJpgPngOrPdfFile({document}) == true",
"text": "Invalid file format, please upload your document in png, jpeg or pdf format."
}]
}
打字代码
Survey.FunctionFactory.Instance.register('isJpgPngOrPdfFile', this.isJpgPngOrPdfFile);
isJpgPngOrPdfFile(documents) {
console.log(typeof documents + ':' + documents);
if (documents.length < 1) return false;
var fileValue = documents[0];
var checkFile = function(file) {
return (
!file ||
!file.name ||
file.name.toLowerCase().endsWith('.png') ||
file.name.toLowerCase().endsWith('.jpg') ||
file.name.toLowerCase().endsWith('.pdf') ||
file.name.toLowerCase().endsWith('.jpeg')
);
};
if (Array.isArray(fileValue)) {
return fileValue.every(checkFile);
}
return checkFile(fileValue);
}
onUploadMethod
async onFileUpload(s, options) {
if (options.files && options.files.length) {
const file = options.files[0];
try {
const data: any = await this.authService.uploadFile(file.name, file, file.type);
options.callback(
'success',
options.files.map((item: File) => {
return {
file: item,
content: data.code
};
})
);
const aTags = document.querySelectorAll(`[href='${data.code}']`);
if (aTags.length) {
(aTags[0] as HTMLAnchorElement).href = data.documentUrl;
(aTags[0] as HTMLAnchorElement).innerHTML = data.name;
(aTags[0] as HTMLAnchorElement).target = '_blank';
}
} catch (e) {
}
}
}
转载请注明出处:http://www.resmedchina.com/article/20230526/2072125.html