如何使用UploadCare获取上传图像的自定义存储文件名？

问题描述

我想使用自己的S3存储设备并显示刚刚上传的图像。如何获取上传到S3的文件名？ 例如，我可以将jpg图片上传到UploadCare。 这是我可以获得的输出： fileInfo.cdnUrl：“ https://ucarecdn.com/6314bead-0404-4279-9462-fecc927935c9/” fileInfo.name：“0（3）.jpg”

但是，如果我检查我的S3存储桶，则这是实际上已上传到S3的文件名：https://localdevauctionsite-us.s3.us-west-2.amazonaws.com/6314bead-0404-4279-9462-fecc927935c9/03.jpg

这是我到目前为止使用的javascript：

var widget = uploadcare.Widget('[role=uploadcare-uploader]');
widget.onChange(group => {
  group.files().forEach(file => {
    file.done(fileInfo => {
      // Try to list the file from aws s3
      console.log('CDN url:',fileInfo.cdnUrl);
      //https://uploadcare.com/docs/file_uploader_api/files_uploads/
      console.log('File name: ',fileInfo.name);
    });
  });
});

解决方法

文件名在复制到S3之前先经过清理，因此输出文件名只能包含以下字符：

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 _

以下功能可用于获取已清理的文件名：

function sanitize(filename) {
  var extension = '.' + filename.split('.').pop();
  var name = filename.substring(0,filename.length - extension.length);
  return name.replace(/[^A-Za-z0-9_]+/g,'') + extension;
}

最终的S3 URL可以由S3基本URL，文件UUID（可以从fileInfo对象获得）以及上载文件的已清理名称组成。