AWS S3 使用预签名 URL 更新映像（Axios-PUT 请求）

Question

我正在尝试使用 REST PUT 请求和 Axios 将 本地 JPG 图像文件更新到 S3 存储桶中。

我成功发送了 PUT 请求并从 AWS S3 服务获得了肯定的答复 但是上传的内容不是 JPG 文件而是 JSON 文件。

这是我正在使用的代码：

    //Create the FormData
    var data = new FormData();
    data.append('file', fs.createReadStream(image_path));


   //Send the file to File-system
   console.log("Sending file to S3...");
   const axiosResponse = await axios.put(image_signed_url, {
       data: data,
       headers: { 'Content-Type': 'multipart/form-data' }
     }).catch(function(error) {
      console.log(JSON.stringify(error));
      return null;
     });

我已经尝试将标题更改为

{'Content-Type': 'application/octet-stream' }

，但我得到了相同的结果。

Answer 1

它无法使 AXIOS 工作以上传图像。

节点获取模块以二进制形式发送图像并指定“内容类型”。

如果我尝试使用 AXIOS 进行相同的操作，图像始终会打包到表单数据中，结果是将 JSON 文件上传到 S3 存储桶而不是图像中。

 //Send the file to File-system
console.log("Sending file to S3...");
const resp = await fetch(image_signed_url, {
    method: 'PUT',
    body: fs.readFileSync(image_path),
    headers: {
      'Content-Type': 'image/jpeg',
  },
}).catch( err => {
  console.log(err);
  return null;
});

Answer 2

AXIOS版本：

与 Axios 一起使用时，不要以 FormData 形式发送，直接发送，否则签名不匹配错误。

const s3PUTSignedURL = (url: string, data: any) => {
        return new Promise((resolve, reject) => {
           //file Stream without formData as second parameter
            axios.put(url, data, {
                headers: {
                    'Content-Type': data.type,
                }
            })
                .then((response) => {
                    console.log(JSON.stringify(response.data));
                    return resolve(response);
                })
                .catch((error) => {
                    console.log(error);
                    return reject(error);
                });
        });
    };

参考：https://github.com/axios/axios/discussions/4478#discussioncomment-2178622

获取版本：

与 Fetch 一起使用时发送 FormData 和不使用 FormData 都可以。不知道为什么。

const s3PUTSignedURL = (url: string, data: any) => {
    return new Promise((resolve, reject) => {
        const headers = new Headers();
        headers.append('Content-Type', data.type);

        const formdata = new FormData();
        formdata.append('', data);

        const requestOptions = {
            method: 'PUT',
            headers: headers,
            body: formdata,
        };

        fetch(url, requestOptions)
            .then((response) => response.text())
            .then((result) => resolve(result))
            .catch((error) => reject(error));
    });
};