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

【问题标题】：How can I get the custom storage filename for uploaded images using UploadCare?如何使用 UploadCare 获取上传图像的自定义存储文件名？
【发布时间】：2020-09-09 10:35:54
【问题描述】：

我想使用我自己的 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);
    });
  });
});

【问题讨论】：

标签： uploadcare

【解决方案1】：

文件名在复制到 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 对象获取）和已上传文件的净化名称组成。

【讨论】：