reactjs - FineUploader 中的多重验证

Question

我在 React 应用中使用 FineUploader 将文件上传到 Azure Blob 存储。我目前正在使用验证来确保用户只能上传一个文件。我现在想再添加两个验证:

1. 我只想允许 JPG 和 PNG 文件
2. 我还想确保用户可以上传的文件的像素大小必须至少为 300x300 像素。换句话说，我想同时施加宽度和高度要求

如何添加这些验证？对于每项要求，我是否需要在 options 中添加一个验证属性，还是将它们纳入现有的验证属性中？我当前的验证如下所示:

// Omitted for brevity
constructor(props) {

   super(props);
   this.uploader = new FineUploaderAzure({
            options: {
                cors: {
                    expected: true,
                    sendCredentials: false
                },
                signature: {
                    endpoint: "some-url.com"
                },
                request: {
                    endpoint: "my-container-url"
                },
                validation: {
                    multiple: false
                }
            },
            callbacks: {
                onError: function (id, name, errorReason, xhrOrXdr) {

                }
            }
        })
}

Answer 1

假设react/fine-uploader不改变它，作者Documentation ，你应该这样做。

options: {
  multiple: false,
  cors: {
    expected: true,
    sendCredentials: false
  },
  signature: {
    endpoint: "some-url.com"
  },
  request: {
    endpoint: "my-container-url"
  },
  validation: {
    allowedExtensions: ['jpeg', 'jpg', 'png'],
    image:{
      minHeight: 300,
      minWidth: 300
    }
  }
}

PS。我没有在react中使用fineuploader，所以请看看这在react中是否也有效。

<小时/>

更新答案

如果您想进行自己的验证，首先您不应该使用onError。当且仅当发生 error 时，才会调用 onError。您验证图像大小，尽管图像不符合您的条件，但这不是错误。

然后你有两种选择来进行验证，这取决于你想要什么效果。首先您需要了解事件的流程。它是:

onSubmit -> validation -> onValidate

您最可能想要的工作(检查是否是图像)可以在这三个地方完成。

如果您希望在验证中使用它，那么我提供的答案已经实现了(allowedExtensions: ['jpeg', 'jpg', 'png'])。但是假设您想要对警报或其他检查进行一些自定义，则需要在 onValidate 中进行。

callbacks:{
  onValidate: function(data, button_container) {
    console.log(data); //data.name && data.size
    return false;
  }
}

但请注意，在onValidate中，您只能获取文件名和文件大小，无法获取其他信息。

如果您还想检查宽度和高度，您可能需要查看此 SO question (如果您发现这就是您想要的，请给OP投赞成票。)