FineUploader 中的多重验证

Question

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

我只想允许 JPG 和 PNG 个文件
我还想确保用户可以上传的文件的像素大小必须至少为 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。您验证图像大小，尽管图像不符合您的标准，但它不是 error.

然后你有两种选择来做你的验证，这取决于你想要什么效果。首先你需要知道事件的流程。它是：

onSubmit -> validation -> onValidate

你最想做的工作（检查是不是图片）可以在这三个地方完成。

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

中进行

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

但请注意，在onValidate中，您只能取回文件名和文件大小，没有其他信息。

如果您还想检查宽度和高度，您可能需要看一下这个（如果您发现这是您想要的，请给 OP 一个赞。）

FineUploader 中的多重验证

Multiple validations in FineUploader

fine-uploader

reactjs