Cloudinary Upload API：Next.js/React中如何设置图片质量？

你之前在上传URL里加q_70这类路径参数的思路完全错了，这就是导致404和跨域问题的原因。

核心误区 #

Cloudinary的URL路径参数（比如q_70）是给获取已上传图片时做实时变换用的，不是上传接口的路径规则。上传接口的固定格式就是https://api.cloudinary.com/v1_1/<你的云名>/<资源类型>/upload，随便改路径会直接请求不存在的接口，自然返回404，跨域也是因为浏览器拦截了无效请求。

正确的设置方式 #

你现在代码里用formData.append('quality', '10')的做法是对的，上传API的参数要通过FormData字段传递：

• quality字段可以传数值（比如10到100），也可以传Cloudinary的自动优化值，比如q_auto:good（让平台根据图片内容自动平衡质量和体积），比固定数值更实用。

代码优化建议 #

给你的上传逻辑加个错误处理，避免上传失败时程序出问题：

const uploadRes = await fetch(url, {
  method: 'POST',
  body: formData,
});
// 新增：判断请求是否成功
if (!uploadRes.ok) {
  const errorData = await uploadRes.json();
  throw new Error(`图片上传失败: ${errorData.message || uploadRes.statusText}`);
}
const data = await uploadRes.json();

另外确认下你的上传预设（cy1wyxej）是否开启了匿名上传，如果是前端直接上传，这个选项必须在Cloudinary控制台的上传预设里打开，不然会返回权限错误。

内容的提问来源于stack exchange，提问作者Ozan Yurdakul