如何在 surveyJs 中使用带有类型文件的验证器？

Question

我正在尝试使用自定义验证器使用 surveyJs 和 typescript 验证我的表单上上传的文档，但验证器在文件上传后被调用我想在上传前验证文件类型。 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) {
   
  }
}
}

Answer 1

我找到了进行验证的解决方案。要在文件类型不受支持的情况下显示自定义消息，可以使用 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

如何在 surveyJs 中使用带有类型文件的验证器？

How to use validator with type file in surveyJs?

typescript

angular

surveyjs