问题描述
我正在尝试使用自定义验证器使用surveyJs和打字稿验证表单上上传的文档，但在文件上传后调用了验证器，我想在上传之前验证文件类型。 当上传不受支持的文件类型且未调用验证器时，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) {
}
}
}
解决方法
我找到了进行验证的解决方案。在不受支持的文件类型的情况下显示自定义消息可以使用 addError() 方法。
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) {
options.question.addError(new Survey.CustomError(e.error.message));
options.callback('error');
return;
}
}
}