上传图像时出现“无法识别的内容编码类型”错误答案

【问题标题】："Unrecognized content encoding type" error when uploading an image上传图像时出现“无法识别的内容编码类型”错误
【发布时间】：2021-10-16 07:01:23
【问题描述】：

我正在尝试获取已上传到 CDN 的图像。在上传之前，我使用canvas.toDataURL 将我的图像转换为 PNG。

当我尝试获取图像时出现以下错误：Error: cURL error 61: Unrecognized content encoding type. libcurl understands deflate, gzip, br content encodings

所以我首先使用 FabricJS 创建了这个图像：然后我使用以下命令将其导出为 PNG：

const dataURL = canvas.toDataURL({
    width: canvas.width,
    height: canvas.height,
    left: 0,
    top: 0,
    format: 'png'
})

然后我将它上传到我的 S3 CDN 使用：

async function uploadPNG(dataURL, filePath) {
  const buf = Buffer.from(dataURL.replace(/^data:image\/\w+;base64,/, ""),'base64')

  const uploadParams = {
    Bucket: bucketName,
    ContentType: 'image/png',
    ContentEncoding: 'base64',
    Body: buf,
    Key: filePath
  }

  return await s3.upload(uploadParams).promise()
}

然后我尝试使用他们的 API 将该图像（现在位于 S3 CDN 中）上传到 WooCommerce 站点。 https://s3.eu-central-1.amazonaws.com/cdn.blankt.com/product/s/AY6AJSHMXnf2ReCZOu.png

这是该 API 请求的一部分：

{
  "name": "AY6AJSHMXnf2ReCZOu",
  "type": "variable",
  "regular_price": "9.90",
  "sku": "AY6AJSHMXnf2ReCZOu",

  ...

  ],
  "images": [
    {
      "src": "https://s3.eu-central-1.amazonaws.com/cdn.blankt.com/product/s/AY6AJSHMXnf2ReCZOu.png"
    }
  ],
  "attributes" : [
    {
      "name"      : "Size",
      "variation" : true,
      "visible"   : true,
      "options"   : [ "A3", "A4", "A5" ]
    }
  ]
}

这是我得到的回应：

这个问题似乎只在我尝试使用 API 上传图片时出现，如果我手动下载并上传图片到 WooCommerce，则没有问题。

【问题讨论】：

... 是的，他们确实压缩了图像数据，PNG 格式基本上是对像素数据进行了压缩，但是文件没有重新压缩。 您的错误与这些方法无关。问题在于您向服务器发出的请求。请说明这个请求是如何提出的。
感谢Kaiido的评论，我会在问题中补充一些信息
我编辑了您的问题，以便正确的受众可以正确找到它（不幸的是，我自己不是这个“正确的受众”的一部分，因为我对 WooCommerce 及其 API 一无所知。
感谢 Kaiido，我不认为 WooCommerce 是问题所在，因为我没有找到很多有关此特定错误的问题/案例。
1.您是否复制了图像 url 并粘贴到新选项卡中以查看图像是否可见？ 2.现在工作了吗？该错误似乎并不是说问题出在你的最后，它是来自curl（wc 后端）的响应，它试图在 woocommerce 系统中获取图像。可以看到this this和this

标签： javascript amazon-s3 woocommerce

【解决方案1】：

您似乎在 s3 上传中提供了无效的内容编码，您在其中提供了参数 ContentEncoding: 'base64'。

upload 方法的s3 SDK documentation 在处理ContentEncoding 参数的细节上有些不清楚：

ContentEncoding——（字符串）指定对对象应用了哪些内容编码，因此必须应用哪些解码机制才能获得 Content-Type 标头字段引用的媒体类型。

但我怀疑它只是在访问对象时作为Content-Encoding HTTP 标头（MDN）传递。在这种情况下，图像可以在您的浏览器中正常加载，因为它足够聪明（或者可能很笨），可以丢弃它无法识别的编码，但是 WooCommerce 的后端不会这样做，而是会产生错误。

解决方案：从您的 s3 上传参数中删除 ContentEncoding - 您首先不会上传编码的内容，因为您将 base64 数据解码为原始字节，然后将其传递给Buffer.from 和 'base64' 编码参数（参见 Node.JS 文档中的 Buffer.from(string[, encoding]) 和 character encodings）

【讨论】：