Блог

Главная - Вопросы по программированию - Как вы размещаете данные и файлы формы с помощью Ajax в asp.net.core?

Как вы размещаете данные и файлы формы с помощью Ajax в asp.net.core?

#javascript #c#

#javascript #c#

Вопрос:

У меня есть эта html-форма, в которой я хочу размещать данные и файлы в C # Web Api. Вот мой интерфейсный код

 document.getElementById("form1").addEventListener("submit", function (e) {
        e.preventDefault();
        var input = document.getElementById('files');

        var files = input.files;

        var formData = new FormData();

        for (var i = 0; i != files.length; i  ) {
            formData.append("files", files[i]);
        }

        var tags = $('#tags').val();

        formData.append("tags", tags);
    
        $.ajax(
            {
                url: "https://localhost:44371/api/file/upload",
                processData: false,
                contentType: false,
                type: "POST",
                data: formData,
                dataType: 'json',
                success: function () {
                    alert("Files Uploaded!");
                }
            }
        );
    });  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
  <div class="form-group">
    <div class="buttons">
      <div class="upload-button">
        <input id="files" name="files" type="file" size="1" />
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="tags">Tags:</label>
    <input type="text" class="form-control" id="tags">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" id="btnSave">Upload and Save</button>
  </div>
</form>

И вот мой внутренний код C # для веб-Api:

 [HttpPost]
    [Route("upload")]
    public async Task<ActionResult<FileDocument>> PostFileDocument(List<IFormFile> files, string tags)
    {
        return Ok("test");
        
    }

Я могу использовать этот метод, и я вижу files , что у него есть данные. Но tags отображается значение null. Но я добавил tags в formData.append("tags", tags); . Я погуглил, и некоторые сказали, [FromBody] List<IFormFile> files что я пробовал, но когда я это сделал, он стал нулевым.

Ответ №1:

Я читал, но не пробовал сам, что это работает путем создания класса, который будет использоваться в качестве параметра PostFileDocument() . Этот класс будет иметь массив IFormFile и свойство string для тегов, как в

 class SomeController 
{
    [HttpPost]
    [Route("upload")]
    public async Task<ActionResult<FileDocument>> PostFileDocument([FromForm]Payload payload)
    {
        // some nice code here
    }
}

class Payload 
{
    // You probably have to align the naming of what you `append()`
    // to the `FormData` in JavaScript (e.g. `formData.append("Files", ...)`
    // instead of `formData.append("files", ...)`). 
    public IFormFile[] Files {get;set;}
    public string Tags {get;set;}
}

Это описано здесь: https://thomaslevesque.com/2018/09/04/handling-multipart-requests-with-json-and-file-uploads-in-asp-net-core/

Комментарии:

1. Подойдет любой тип коллекции для files — это не обязательно должен быть массив. JS просто нужно добавить к каждому FormData ключу префикс payload. для его привязки (например payload.files ). В качестве альтернативы, просто использование [FromForm] string tags также будет работать.