如何在surveyJs中使用带类型文件的验证器？
如何在surveyJs中使用带类型文件的验证器？
提问于 2021-02-26 14:46:42
我正在尝试在我的表单上验证上传的文档，并使用测量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) {
}
}
}Stack Overflow用户
回答已采纳
发布于 2021-03-02 12:01:33
我找到了验证的解决方案。若要在文件类型不受支持的情况下显示自定义消息，可以使用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;
}
}}
下面是一个工作示例：
https://plnkr.co/edit/8DSqU2scJ32DXXGP
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66381274
复制相关文章
相似问题
腾讯云开发者
