如何将 q_auto:good 传递到我基于 URL 的 Cloudinary 组件

Question

我的应用程序中有一个组件，即 uploadFiles.js，为了优化，我想在当前组件中使用 q_auto:good 参数。我尝试了不同的方法，但我没有发现上传前后的文件大小有任何差异。

这是我当前的组件。 注意：我使用 URL 而不是 NPM 包

async function uploadFiles(savedImages, input) {
  let files = input.files;
  let filesUrls = [];
  let i = savedImages?.length > 0 ? savedImages?.length : 0;

  for (const file of files) {
    let formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", <upload_preset_ID>);
    let response = await fetch(
      "https://api.cloudinary.com/v1_1/<cloudinary_name>/image/upload",
      {
        method: "POST",
        body: formData,
      }
    );

    await response.json().then((data) => {
      i++;
      filesUrls.push({ imageFilePath: data.secure_url, imageOrder: i });
    });
  }

  return savedImages ? [...savedImages, ...filesUrls] : [...filesUrls];
}

export { uploadFiles };

我尝试在 URL 上传递 q_auto:good 并得到 404 错误 我尝试附加 formData，它向我显示 Payload 中的值，但没有发现任何变化

这是我当前在 Cloudinary 上的优化设置。可以吗？

Answer 1

要在 Cloudinary 中使用 q_auto:good 优化图像质量，请在生成用于图像访问的 URL 时应用它，而不是在上传期间应用它。调整您的函数以在上传后将 ?q_auto:good 附加到 URL：

await response.json().then((data) => {
  i++;
  const optimizedUrl = `${data.secure_url}?q_auto:good`;
  filesUrls.push({ imageFilePath: optimizedUrl, imageOrder: i });
});