如何阻止Cloudinary上传小工具创建文件夹并实现文件夹扁平化？

• 用带签名上传的Cloudinary上传组件时，拖拽文件夹会自动在Cloudinary创建同名文件夹，需要阻止这个行为，只上传文件夹里的文件（包括嵌套文件夹里的全部扁平化），这个功能之前正常现在失效了。
• 拖拽嵌套文件夹上传时会出现invalid signature错误，之前扁平化模式能正常上传，排查发现此时params_to_sign会变成数组，导致签名失败。

前端配置代码 #

cloudinary.applyUploadWidget(
  document.getElementById("upload_widget_images"),
  {
    api_key: XXXXX,
    cloudName: XXXXX,
    upload_preset: XXXXX,
    sources: ["local", "dropbox"],
    uploadSignature: generateSignature,
    buttonCaption: "Upload assets",
    clientAllowedFormats: ["jpg", "jpeg", "png", "mp3", "wav"],
    styles: uploaderStyles,
    button_class: "uploader-button",
    max_files: 2000,
    // 图片缩放到宽800px / 高500px
    maxImageWidth: 800,
    maxImageHeight: 500,
    folder: "myfolder", // 试过加和不加
    use_filename: true, // 试过加和不加
    useAssetFolderAsPublicIdPrefix: false, // 试过加和不加
  }, 
  (error, result) => {}
);

后端签名代码 #

const signature = cloudinary.utils.api_sign_request(
  params_to_sign,
  process.env.CLOUDINARY_API_SECRET
);

1. 阻止自动创建文件夹+实现扁平化上传 #

直接在前端配置里新增autoCreateFolder: false参数，同时保留useAssetFolderAsPublicIdPrefix: false和固定的folder值，就能阻止组件自动创建子文件夹，所有文件都会直接传到你指定的myfolder里，嵌套文件夹里的文件也会扁平化上传，不会带原层级路径。

更新后的前端配置关键部分：

folder: "myfolder",
useAssetFolderAsPublicIdPrefix: false,
autoCreateFolder: false, // 加这个参数就能阻止自动建文件夹

2. 修复嵌套文件夹上传的签名错误 #

拖拽嵌套文件夹时，Cloudinary传给uploadSignature的params会变成数组，而后端的api_sign_request只能处理单个参数对象，所以签名失败。修改前端的generateSignature函数，判断如果是数组就遍历每个参数单独请求签名：

async function generateSignature(params) {
  // 嵌套文件夹上传时params是数组，需要逐个处理
  if (Array.isArray(params)) {
    return Promise.all(params.map(async (singleParam) => {
      const res = await fetch("/你的签名接口地址", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ params_to_sign: singleParam })
      });
      return res.json();
    }));
  } else {
    // 单文件上传的常规情况
    const res = await fetch("/你的签名接口地址", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ params_to_sign: params })
    });
    return res.json();
  }
}

后端代码不用修改，api_sign_request处理单个参数对象是正常的，只要前端把数组里的每个参数单独传过去就行。另外别忘了检查你的上传预设（upload_preset），确保是“签名上传”模式，别开启自动创建文件夹的选项。

内容的提问来源于stack exchange，提问作者Dan Kennedy