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。仅在发生onError时调用error。您可以验证图像的大小，尽管该图像不符合您的标准，但不是error。

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

onSubmit->验证-> onValidate

您最想做的工作（检查是否为图片）可以在三个地方完成。

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

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

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

如果您还想检查宽度和高度，则可能需要查看一下SO question（如果发现自己想要的，请给个赞。）

在FineUploader中进行多次验证

1 个答案: