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 results in

我的方法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();
}

如何使用文件和json发送请求帖子？

1 个答案: