axios multipart/form-data 请求返回为“request is not well-formed multipart/form-data”答案

【问题标题】：Axios multipart/form-data request return as "request is not well-formed multipart/form-data"axios multipart/form-data 请求返回为“request is not well-formed multipart/form-data”
【发布时间】：2021-10-11 11:03:17
【问题描述】：

我想使用 Shopify api。我想用这个 API 上传视频。所以官方文件是这样的：

https://shopify.dev/api/examples/product-media#videos-3d-models-post-request

所以，我创建了一个 axios 配置并尝试发送请求。我的代码是这样剪断的：

        let fd = new FormData();
        fd.append("bucket", bucket);
        fd.append("key", key);
        fd.append("policy", policy);
        fd.append("cache-control", cacheControl);
        fd.append("x-amz-signature", xAmzSignature);
        fd.append("x-amz-algorithm", xAmzAlgorithm);
        fd.append("x-amz-date", xAmzDate);
        fd.append("file", fs.createReadStream('./milk.mp4'));


        const config: AxiosRequestConfig = {
            url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
            data: fd,
            method: "POST",
            headers: { "Content-Type": "multipart/form-data" }
        }

        try {
            const videoPost = await axios(config);
        }
        catch (err) {
            console.log(err)
        }

所以，我收到这样的错误：

   ....
   ....
   [Symbol(kOutHeaders)]: [Object: null prototype]
    },
    data: '<?xml version="1.0" encoding="UTF-8"?>\n' +
      '<Error><Code>MalformedPOSTRequest</Code><Message>The body of your POST request is not well-formed multipart/form-data.</Message><RequestId>184VT99AXG4J6FWW</RequestId><HostId>1IBK7dCgApORGZnaGxS/n22Ftgw0fRBW1EnMuhFpEPek5R3iwsa2T9MH2q8A31l1AU9lhAb2WYA=</HostId></Error>'
  },
  isAxiosError: true,
  toJSON: [Function: toJSON]
}

为什么会出现这个错误？我该如何解决这个问题？请帮忙

【问题讨论】：

new FormData(...) 函数与Content-Type "multipart/form-data" 不对应。我建议将其转换为 JSON 数据，然后使用 application/json 作为您的 Content-Type。

标签： node.js typescript axios multipartform-data

【解决方案1】：

这里是解决方案

const config: AxiosRequestConfig = {
            url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
            data: fd,
            method: "POST",
            headers: { ...fd.getHeaders() }  // <-- This is the Fix.
}

【讨论】：

【解决方案2】：

正如documentation 所说，formdata 语法有两个版本。

如下修改代码：

fd.append("file", fs.createReadStream('./milk.mp4'));

...

const config: AxiosRequestConfig = {
    url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
    data: fd,
    method: "POST",
    headers: { "Content-Type": "multipart/form-data" }
}

到

fd.append("file", fs.createReadStream('./milk.mp4'), {filename: 'milk.mp4'});

...

const config: AxiosRequestConfig = {
    url: "https://shopify-video-production-core-originals.s3.amazonaws.com/",
    data: fd,
    method: "POST",
    headers: fd.getHeaders()
}

【讨论】：