代码之家 › 专栏 › 技术社区 › bart

如何在Uploadcare小部件中实现minDimensions

uploadcare

1

bart · 技术社区 · 6 年前

可以按以下方式将设置添加到Uploadcare:

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

minDimensions 准备好了吗? The 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 回复 | 直到 6 年前

1

2

Alex Chernenko 6 年前

思维维度 ,以及 最小宽度 最小高度 ,不是小部件选项。链接指向文件验证文档。文件验证是一个函数,它在文件完全上载之前调用,并且可以访问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');
      }
    }
  }
}

然后,当您打开一个对话框时,您将验证函数添加到对话框设置中的validators数组中

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

如果文件未通过验证,小部件将显示默认错误消息-“cannotupload”,但您可以使用UPLOADCARE\u LOCALE\u 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'
    }
  } } } }
};

2

1

Dmitry Mukhin 6 年前

所以,写吧 minDimensions 功能与您选择的签名和逻辑。这些文档有一些实现示例 imagesOnly maxDimenstions 验证功能。你可以用它们来获得灵感。

当验证函数由于某种原因拒绝文件时,应该抛出错误,例如。 throw new Error('dimensions'); 这个 'dimensions'

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

你可以找到更详细的例子 here