我如何使用获取将json对象和文件发布到asp.net服务器

Question

I'm a bit stuck here, I'm trying to post a json object from my indexedDb simultaneously with a IFormFile object to the server. The method that accepts it looks like this:

[HttpPost]
    public async Task<IActionResult> Create(BatchModel model, IFormFile vinFile)
    {
    //logic goes here
    }

This method worked earlier, before I had to store my batchModels as Json objects, and were just posted straight from the form with a POST. A lot has changed since then, and now the client will upload it as soon as he gets online again from an offline state, with the following (simplified) method:

if (infoChanged === true) {
    fetchPromises.push(
        fetch('/Batch/Create/', {
            headers: new Headers({
                'Content-Type': 'application/javascript' //Tried this with multi-part/form
            }),
            credentials: 'same-origin',
            method: 'POST',
            body: batch //, vinFile
        })
    );
}
return Promise.all(fetchPromises);

For testing I tried to use the method with only the model filled, and the only thing I had to change was that I had to change in the C# code was adding a [FromBody] tag, but now I need the vinFile filled as well. I tried it already with a FormData object, appending the batch and the vinFile with the same name as in the Create function. But that would result in both variables as null.

Answer 1

The key feature you need to look at is your header. You can change your response to JSON if you do header: { Content-Type: "application/json" }

You want something like this: You need to configure the type yourself.

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); });

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch