cloudinary上传api：如何设置质量？ Next.js / 反应

Question

这是我的代码。我尝试添加 .../upload/q_70 或 .../upload/q_70/ 但一旦我这样做，我就会收到 404 错误和一些跨源错误。现在很难再次重现错误。但也许我完全走错了路。

const handleUploadMultipleImagesInput = async (images) => {
    if (!imageChanged.otherImages) {
      return form.images.other;
    }
    if (isEmptyArray(images)) {
      const resetOtherImagesToDefault = [{ publicID: '', resourceType: '', type: '' }];
      return resetOtherImagesToDefault;
    }
    const preset = 'cy1wyxej';
    const url = 'https://api.cloudinary.com/v1_1/drt9lfnfg/image/upload';

    let otherImagesIndexObject = [];
    for (let image of images) {
      if (image?.publicID) {
        const otherImagesImageResObject = { ...image };
        otherImagesIndexObject.push(otherImagesImageResObject);
      } else {
        const formData = new FormData();
        formData.append('file', image.file);
        formData.append('upload_preset', preset);
        formData.append('quality', '10');
        const uploadRes = await fetch(url, {
          method: 'POST',
          body: formData,
        });
        console.log('uploadRes', uploadRes);
        const data = await uploadRes.json();
        console.log('data', data);
        const otherImagesImageResObject = {
          publicID: data.public_id,
          resourceType: data.resource_type,
          type: data.type,
          id: image.id,
        };
        otherImagesIndexObject.push(otherImagesImageResObject);
      }
    }
    return otherImagesIndexObject;
  };

Answer 1

您几乎总是希望上传图像的完整分辨率，然后仅在交付时转换图像，例如使用 URL 中的

q_10

，检查此参考：https://cloudinary.com/documentation/transformation_reference#q_auto。

这里是经过

q_70

变换的示例图像： https://res.cloudinary.com/demo/q_70/sample

无论如何，另一个选项是在设置页面中配置上传预设。选择/编辑上传预设 > 上传操作 > 添加 Eager。将质量参数滑块设置为 10，然后保存更改。从现在开始，每次您使用此上传预设时，Cloudinary 都会根据急切的转换生成图像的派生：

q_10

。因此，您无需在表单提交中附加

formData.append('quality', '10');

。