直接 URL 调用上的 Cloudinary 图像转换答案

【问题标题】：Cloudinary Image Transformation on Direct URL Call直接 URL 调用上的 Cloudinary 图像转换
【发布时间】：2021-09-21 07:41:37
【问题描述】：

我正在尝试通过转换附带的直接 Cloudinary API 调用上传图像。现在，我只能上传没有像这样转换的图像：

...

    const fileList = files;
    const data = new FormData();
    const { signature, timestamp } = await getSignature(); // Get returned sign and timestamp
    data.append("file", fileList[0]);
    data.append("signature", signature); // Signature
    data.append("timestamp", timestamp); // Timestamp
    data.append("api_key", process.env.NEXT_PUBLIC_CLOUDINARY_KEY);
    const res = await fetch(
      `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_NAME}/image/upload`,
      {
        method: "POST",
        body: data,
        mode: "cors",
      }
    );
    const file = await res.json();

...

但这一次，我尝试通过 URL 上传包含水印的图像。我尝试做类似的事情：

const res = await fetch(
      `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_NAME}/image/upload/l_obra_watermark`,
      {
        method: "POST",
        body: data,
        mode: "cors",
      }
    );

但它总是会出现 CORS 错误。是否可以通过 URL 应用转换？我还能如何做到这一点？

【问题讨论】：

标签： javascript node.js cloudinary

【解决方案1】：

您可以在上传预设中包含所需的转换，并在上传调用中使用此上传预设，如下所示：

data.append("upload_preset", my_preset);

您可以在此处阅读有关上传预设的信息：

https://cloudinary.com/documentation/upload_presets

【讨论】：

【解决方案2】：

我意识到我没有正确地使用语法。我通过阅读文档并将其应用到我自己的代码中了解到这一点，我意识到我应该将转换放在签名中，如下所示：

const cloudinaryHandler = async (
  _req: NextApiRequest,
  res: NextApiResponse
) => {
  // Must be UNIX format
  const timestamp = Math.round(new Date().getTime() / 1000);

  // Signature
  const signature = cloudinary.utils.api_sign_request(
    {
      timestamp: timestamp,
      eager: "w_400,h_400,g_south_east,x_5,y_5,l_obra_watermark,o_76",
    },
    process.env.CLOUDINARY_SECRET //API Secret (MUST BE HIDDEN IN ENV)
  );

  res.statusCode = 200;
  res.json({ signature, timestamp });
};

而不是data.append()。

这是我从中学到的文档：

https://cloudinary.com/documentation/upload_images#manual_signature_generation

【讨论】：