如何在Uploadcare小部件中实现minDimensions

时间:2018-10-08 06:59:55

标签: uploadcare

可以按如下所示将设置添加到Uploadcare:

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

现在如何设置minDimensionsThe documentation显示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
});

此外,还不清楚如果上传的图像尺寸小于这些设置会发生什么。窗口小部件是否显示错误?

2 个答案:

答案 0 :(得分:2)

minDimensions 以及 minWidth minHeight 都不是小部件选项。链接指向文件验证文档。文件验证是在文件完全上传之前调用的功能,并且可以访问fileInfo对象,以便您可以检查文件参数(大小,名称,图像尺寸等),并在某些参数与您的参数不匹配时中止上传要求。

要设置图像尺寸验证器,您需要先定义一个验证函数

MyType

然后,当您打开对话框时,将验证功能添加到对话框设置中的验证器数组中

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');
      }
    }
  }
}

如果文件未通过验证,则小部件将显示默认错误消息-“无法上传”,但是您可以使用UPLOADCARE_LOCALE_TRANSLATIONS选项来自定义错误消息

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

答案 1 :(得分:1)

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

当您的验证功能由于某种原因拒绝文件时,您应抛出错误,例如throw new Error('dimensions'); 'dimensions'字符串将用于在您的自定义本地化地图中查找用户友好的消息:

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

您可以找到更详尽的示例here