javascript - 使用 axios 将图像上传到 AWS 预签名帖子 URL

Question

我正在尝试使用在 Python 上使用 boto3 生成的预签名 URL 将图像上传到 S3 存储桶。我一直在使用文档中提供的示例 python 代码并且成功(图像已使用正确的内容类型正确上传)。然而，当为了我们的前端应用程序的目的而尝试在 Javascript 中执行此操作时，我真的很难让它工作。

这是后端返回的示例字典:

{
    "fields": {
        "AWSAccessKeyId": "AKIAYS3VM3EBIFL7FKE5",
        "key": "posts/623255a762fd9bdfbd13f91a",
        "policy": "<very long string>",
        "signature": "Qvc/sGBHk0uzirzIfR1YmE2kFlo="
    },
    "url": "https://hotspot-storage.s3.amazonaws.com/"
}

这是运行的Python代码:

response = <json response object>
object_name = 'playground/example_profile_group.png'

response['fields']['Content-Type'] = "image/png"
# Demonstrate how another Python program can use the presigned URL to upload a file
with open(object_name, 'rb') as f:
    files = {'file': (object_name, f)}
    http_response = requests.post(response['url'], data=response['fields'], files=files)

# If successful, returns HTTP status code 204
print(http_response)
print(http_response.text)

这是无法运行的 Javascript 代码:

const data = response.data;
let payload = data.fields;
payload['Content-Type'] = 'image/jpeg';
const file = {
    uri: previewPath,
    name: previewPath,
    type: 'image/jpeg',
};
payload.file = file;
const url = data.url;

console.log(payload, "MY PAYLOAD")

axios({
    method: 'post',
    headers: {'Content-Type': 'multipart/form-data'},
    url: url,
    data: payload,
})
    .then(function (response) {
    console.log(response.data, 'uploaded');
    const data = response.data;
    })
    .catch(function (error) {
    console.log(
        'error uploading image',
        error.response.data,
    );
    });
})
.catch(function (error) {
console.log(
    'error getting media link',
    error.response.data,
);
});

这是不断返回的错误:

 error uploading image <?xml version="1.0" encoding="UTF-8"?>
<Error><Code>MalformedPOSTRequest</Code><Message>The body of your POST request is not well-formed multipart/form-data.</Message><RequestId>Q0ES6P4QP75YVVED</RequestId><HostId>eowLxSJQD1xP1EfHPnzGSJzXVGpPjurIMhkdwAD22JMvi9zRoFGg6Bq+mnUt/Lu7DNPY80iBDMc=</HostId></Error>

我已经被困在这个问题上很长时间了，而且不知道我做错了什么。任何帮助将非常感激。

Answer 1

为了发送 multipart/form-data 请求正文，您需要使用 FormData实例而不是 JavaScript 对象。

例如

const { url, fields } = response.data;
const payload = new FormData();
payload.append("file", file); // this is the file blob, eg from <input type="file">
payload.append("Content-Type", "image/jpeg");

// add all the other fields
Object.entries(fields).forEach(([ key, val ]) => {
  payload.append(key, val);
});

// No need to manually set content-type header, your browser knows what to do
const { data: result } = await axios.post(url, payload);
console.log("uploaded", result);