fetch ImageData - Missing boundary in multipart/form-data - Patch

问题

There are thousands of questions similar to this one but somehow I failed to find my answer.

Some of them like this suggest setting the Content-Type to undefined. Others suggest removing the Content-Type like this. I tried both.

If I set the Content-Type to multipart/form-data, I face with Failed to read the request form. Missing content-type boundary.. I even tried to add custom boundaries like multipart/form-data; boundary=--XXX-- and faced with Failed to read the request form. Multipart body length limit 16384 exceeded. to address this error I added the following but nothing has changed.

In the Startup:

services.Configure<Microsoft.AspNetCore.Http.Features.FormOptions>(x =>
    {
        x.ValueLengthLimit = int.MaxValue;
        x.MultipartBodyLengthLimit = int.MaxValue;
        x.MultipartHeadersLengthLimit = int.MaxValue;
    });

When I removed the Content-Type, I faced with The info field is required..

Also, tried application/octet-stream and faced with Unsupported Media Type.

My Typescript is:

public updateProfilePicture = async (data: ImageData): Promise<void> => {
    const headers = new Headers();
    this.addOrigin(headers);
    this.addUserToken(headers);
    headers.append("Content-Type", "multipart/form-data");

    const form = new FormData();
    form.append("file", new File([new Uint8Array(data.data)], "profile.jpg"));

    const request = new Request(
        this.toAbsolute("api/v1/user/profile-picture"),
        {
            method: "PATCH",
            mode: "cors",
            body: form,
            headers,
        });

    const response = await fetch(request);
    // check result
}

And here is my API

[HttpPatch("profile-picture"), Authorize]
[AllowedExtensions(".jpg", ".png", ".bmp")]
public async Task<IActionResult> SetProfilePicture(IFormFile info)
{
    var user = await this.GetUser();
    await UserService.UpdateProfilePicture(user, info.FileName, await info.GetContent());
    return Ok();
}

FYI, the ImageData is the result of _2D_context.getImageData(area.x, area.y, area.width, area.height);

来源：https://stackoverflow.com/questions/64706897/fetch-imagedata-missing-boundary-in-multipart-form-data-patch

标签

file-upload

fetch

httprequest

multipartform-data

content-type