在 React 中使用 Axios 上传到 S3 (PUT) 时数据损坏

Question

使用以下函数，我可以将图像上传到 S3，但在尝试检索图像时无法打开图像。以下是 React 应用程序中使用的一个函数，它使用 'react-dropzone' 处理文件：

import axios, { post } from 'axios'
import { Buffer } from 'buffer'
const processImage = ({ file }) => {
const reader = new FileReader()
reader.onload = async () => {
const base64data = reader.result
const bufferdata = Buffer.from(base64data, 'base64')

const generateSignedS3Url = '/.netlify/functions/get-s3-urls'
// Obtains signed URLs from a Netlify Serverless Function
const { data } = await post(generateSignedS3Url, {
clientFilename: file.name,
mimeType: file.type,
}).catch(e => {
console.error('Error in generating signed url ', e)
})
axios({
method: 'PUT',
url: data.putUrl,
data: bufferdata,
headers: { 'Content-Type': file.type, 'Content-Encoding': 'base64' },
}).catch(e => {
console.error(e) 
})
}
reader.readAsDataURL(file)
}

以下内容包含用于获取上面调用的无服务器函数的签名 URL 的参数：

const putParams = {
Bucket,
Key,
Expires: 2 * 60,
ContentType: body.mimeType,
ContentEncoding: 'base64',
}
const putUrl = s3.getSignedUrl('putObject', putParams)

在这里，body.mimeType会'image/jpeg'.

从类似的堆栈溢出问题扫描，我确保以下内容：

1. 标头'Content-Encoding'设置为'base64'
2. 我正在使用缓冲区使用 NPM 缓冲区库发送内容(这是一个客户端应用程序(
3. 标头'Content-Type'与正在发送的文件匹配(即对于文件"background.jpg"，标头设置为"image/jpeg"(
4. 我也尝试在没有缓冲区的情况下发送

在提交之前，我已经浏览了类似的SO问题。它们包括 1、2、3。还有其他的，但它们适用于节点后端。

Answer 1

reader.result

在编码数据之前有一个前缀。正如 MDN 上描述的那样：

如果不先删除 Base64 编码数据之前的数据 URL 声明，则无法将 Blob 的结果直接解码为 Base64。若要仅检索 Base64 编码的字符串，请先从结果中删除data:*/*;base64,。

因此，您可以执行以下操作：

const base64data = reader.result.split(',')[1];