如何在Uploadcare Widget中实现minDimensions

Question

可以将设置添加到Uploadcare中，如下所示：

var myDialog = uploadcare.openDialog(null, {
    imagesOnly: true,
    multiple: true,
    multipleMin: 1
    multipleMax: 7
});

现在minDimensions是如何设置的？文献资料显示minDimensions(800x600)，但是这个表示法不起作用。以下尝试不起作用：

var myDialog = uploadcare.openDialog(null, {
    imagesOnly: true,
    multiple: true,
    multipleMin: 1
    multipleMax: 7,
    minDimensions: '800,600'
});

以下也不起作用：

var myDialog = uploadcare.openDialog(null, {
    imagesOnly: true,
    multiple: true,
    multipleMin: 1
    multipleMax: 7,
    minWidth: 800,
    minHeight: 600
});

此外，如果上传的图像尺寸小于这些设置，还不清楚会发生什么。Widget是否显示错误？

Answer 1

minDimensions以及minWidth和minHeight都不是小部件选项。该链接引用文件验证文档。文件验证是在文件完全上传之前调用的函数，它可以访问fileInfo对象，以便您可以检查文件参数(大小、名称、图像尺寸等)。如果某些参数不符合您的要求，则中止上传。

要设置图像维度验证器，首先需要定义一个验证函数

function minDimensions(width, height) {
  return function(fileInfo) {
    var imageInfo = fileInfo.originalImageInfo;
    if (imageInfo !== null) {
      if (imageInfo.width < width || imageInfo.height < height) {
        throw new Error('dimensions');
      }
    }
  }
}

然后，在打开对话框时，将验证函数添加到对话框设置中的验证器数组中。

var myDialog = uploadcare.openDialog(null, {
    imagesOnly: true,
    multiple: true,
    multipleMin: 1,
    multipleMax: 7,
    validators: [minDimensions(800, 600)]
});

如果一个文件没有通过验证，小部件将显示默认的错误消息“不能上传”，但是您可以使用UPLOADCARE_LOCALE_TRANSLATIONS选项自定义错误消息。

UPLOADCARE_LOCALE_TRANSLATIONS = {
  // messages for widget
  errors: {
    'dimensions': 'The image has to be 800x600px or larger.'
  },
  // messages for dialog’s error page
  dialog: { tabs: { preview: { error: {
    'dimensions': {
      title: 'Error.',
      text: 'The image is too small. Try to upload another one.',
      back: 'Back'
    }
  } } } }
};

Answer 2

您需要定义自己的验证器函数，并将它们添加到小部件/对话框中。因此，使用您选择的签名和逻辑编写minDimensions函数。文档中有imagesOnly和maxDimenstions验证函数的示例实现。你可以用它们来激发灵感。

当您的验证函数出于某种原因拒绝一个文件时，您应该抛出错误，例如throw new Error('dimensions'); -- 'dimensions'字符串将用于查找自定义本地化地图中的用户友好消息：

UPLOADCARE_LOCALE_TRANSLATIONS = {
  errors: {
    'dimensions': 'File dimension check failed',
    ...
  },
  ...
}

您可以找到更详细的示例这里。