拥有 `content-type: application/octet-stream` 是否一定意味着我们应该将请求正文设置为二进制形式？

Question

我在合同中有这个带有 cUrl 的示例请求（合同文档仅针对端点显示了这一点）：

curl \
    -X PUT \
    -H 'Content-Type: application/octet-stream' \
    -H 'Content-Disposition: attachment; filename=file.pdf \
    --upload-file my-file \
    https://storage.google.apis.com/…..

---

用于更新图像的端点。我只有一张

base64

字符串格式的图像，我想通过此端点上传此数据。

1. 由于 API 文档仅提供该信息，我是否应该直接传递

   base64

   字符串作为请求正文，如下所示：

const dummyBase64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABjElEQVRIS+2VvUoDQRSGv9V2'

fetch(
    'https://storage.google.apis.com/…',
    {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/octet-stream',
            'Content-Disposition': 'attachment; filename="dummy.js"'
        },
        body: dummyBase64Image,
    }
)..... // callback handling

或者我应该将

base64

字符串格式的图像解析为另一种形式（例如将base64字符串解析为二进制格式）？

2. 文档中带有 cUrl 和

   content-type: application/octet-stream

   的请求示例是否足以得出结论：请求正文形式必须仅仅是 a

   base64

   字符串格式（上面显示的获取链），而不是像传入的通常对象具有一些预先确定的字段名称的请求正文，例如（在获取链接下面）：

fetch(
    'https://storage.google.apis.com/…',
    {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/octet-stream',
            'Content-Disposition': 'attachment; filename="dummy.js"',
        },
        body: {
            image: dummyBase64Image,
        }
    }
)..... // callback handling

Answer 1

是的，您需要从base64格式转换为原始二进制格式，以

Blob

或

Buffer

的形式，请记住，您需要删除

data:image/[extension];base64,

，因为它只是一个前缀，用于标识中的内容数据 URI 方案。

const dummyBase64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABjElEQVRIS+2VvUoDQRSGv9V2';


function base64ToBlob(base64, mimeType) {
    const byteCharacters = atob(base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
        const slice = byteCharacters.slice(offset, offset + 512);
        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mimeType});
}


const imageBlob = base64ToBlob(dummyBase64Image, 'image/png');


fetch('https://storage.google.apis.com/…', {
    method: 'PUT',
    headers: {
        'Content-Type': 'application/octet-stream',
        'Content-Disposition': 'attachment; filename="dummy.png"'
    },
    body: imageBlob,
})