Node.js v20中Axios下载图片后添加至FormData报错排查

你用responseType: 'stream'在浏览器环境下获取到的是ReadableStream对象，而FormData的append方法要求第二个参数必须是Blob/File类型，这就是报错的根源。之前代码能运行大概率是在Node.js环境（Node里stream返回的是Buffer，FormData支持Buffer），现在切换到浏览器环境就触发了类型不匹配的错误。

直接把axios请求的responseType改成'blob'，这样axios会自动把图片响应转换成Blob对象，直接就能用于FormData的append操作：

const formData = new FormData()
for (let key in payload) {
  if (key === 'image') {
    const fileUrl = payload.image
    const fileName = fileUrl.split('/').at(-1)
    // 把responseType改成blob
    const imageResponse = await axios.get(fileUrl, { responseType: 'blob' })
    console.log('got', fileUrl)
    const blob = imageResponse.data
    formData.append('image', blob, fileName)
  } else {
    formData.append(key, payload[key])
  }
}

如果必须保留stream模式（比如特殊业务场景），可以把ReadableStream手动转换成Blob，代码如下：

// 备用方案：将ReadableStream转为Blob
const imageResponse = await axios.get(fileUrl, { responseType: 'stream' })
const blob = await new Response(imageResponse.data).blob()
formData.append('image', blob, fileName)

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