Как отправить запрос постом с файлом и json?

Question

У меня есть форма для отправки на сервер. Эта форма имеет поля ввода и файл для загрузки.

Это отправка моей формы.

submit () {
      console.log(this.banners)
      const banners = new FormData()
      banners.append('banners', this.banners)
      this.$axios.post(api.insertBanner, banners).then(response => response.data)
        .catch(error => {
          console.log(error)
        })
    },

console.log приводит к

Мой метод POST:

public async Task<ActionResult> Post(BannersDTO banners)

BannersDTO.cs

public class BannersDTO
{
    public Microsoft.AspNetCore.Http.IFormFile Files { get; set; }
    public string TermoOrSku { get; set; }
    public bool InserirImediato { get; set; }
    public string DataAtivacao { get; set; }
    public string DataVigencia { get; set; }
}

Проблема: я получил status code 400(badRequest), то есть мне нужно изменить ввод, потому что он неверен. Что не так?

Если я изменю части кода:

public async Task<ActionResult> Post(Microsoft.AspNetCore.Http.IFormFile Files)

banners.append('files', this.banners.files)

Мой код работает нормально, но в случае, если я получаю только файл, мне также нужны данные.

Answer 1

Если вы публикуете данные формы. Код ниже для вашей справки:

HTML:

<form >
    Email:  <input asp-for="TermoOrSku" /> <br />
    files:  <input type="file" name="Files">
</form>
<input id="Button1" type="button" value="button" onclick="Upload()" />

JS:

@section Scripts{
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        function Upload() {
            var data = new FormData($('form').get(0));

            axios({
                method: 'post',
                url: '/home/UploadFiles',
                data: data,
                config: { headers: { 'Content-Type': 'multipart/form-data' } }
            })
                .then(function (response) {
                    //handle success
                    console.log(response);
                })
                .catch(function (response) {
                    //handle error
                    console.log(response);
                });

        }
    </script>

}

На стороне контроллера вы можете получить данные, включая файл и другие входные значения:

[HttpPost]
public ActionResult UploadFiles(BannersDTO model)
{
    // to do : read values of model and use it
    // to do : return something
    return View();
}