размещение данных формы с помощью Axios в .NET API

Question

Я использую React и Axios для отправки formData во внутренний API .NET.

API ожидает такие данные:

    [HttpPost("upload")]
    public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
    {
        foreach (var file in fileData) {
            await SaveFile(file, parent);
        }

        return Created("", Map(Repository.Get(parentId)));
    }

Когда я прохожу через отладчик,значение для fileData всегда равно 0.

Вот как я отправляю его с помощью Axios:

    const formData = new FormData();
    formData.append('image', this.state.file);

    console.log("this.state.file = ", this.state.file);
    console.log("formData = ", formData);

    axios({
        url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
        method: 'POST',
        data: formData,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data'
        }
    })
       .then((response) => {
            //handle success
            console.log('response -- then: ', response);
            this.setState({
                file: this.state.file
            });
        })
        .catch((response) => {
            //handle error
            console.log('response -- catch: ', response);
        }); 

Я использую console.log для отладки.Он показывает мне объект файла, когда я записываю его (имя, размер и т. Д.).

Он также запускается в обработчике метода «.then» и показывает следующее:

"response - then: data: Array (0), status: 201, statusText:" Created ""

Итак, я понятия не имею, почему он ничего не отправляет в API, и я не понимаюдействительно не знаю, что происходит или как решить эту проблему.

Любая помощь будет принята с благодарностью.

Спасибо!

Answer 1

Таким образом, у меня была точно такая же проблема, при которой, независимо от того, каким образом я крутил объект FormData и независимо от отправляемых заголовков, я не мог заставить .NET принять отправку.

Со стороны Node.js было действительно трудно проверить HTTP-вызов, выпущенный Axios - то есть я не мог видеть, что я на самом деле POSTing.

Поэтому я переместил POST в пользовательский интерфейс для некоторой отладки и обнаружил, что полезная нагрузка FormData не передавалась, как я ожидал, поэтому было правильно, что .NET отклонял.

В итоге я использовал приведенную ниже конфигурацию, и POST начали проходить.Опять же, в моем случае, я подумал, что мне нужно FormData, но ниже было достаточно просто:

axios({
    url: myUrl,
    method: 'POST',
    data: `email=${myEmail}`,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
.then(response => {
    console.log(response);
    })
.catch(error => {
    console.error(error);
});

Обновление : Не уверен, как будут работать закодированные данные, но так как это 'Я буду передаваться как строка, это стоит выстрел!

const myUploadedImage = "data:image/png;name=colors.png;base64,iVBORw0KGgoAAAANSUhEUgAAA5gAAAEECAIAAADCkQz7AAAGGUlEQVR4nO3YIY/IcRzHcWd4AjZJkZQr2I1dIJlyRU5ErkJggg=="

Answer 2

Вы должны опубликовать массив formData

const filesToSubmit = []
filesToSubmit.push((new FormData()).append('image', this.state.file))

, и при публикации данных имя свойства должно быть formData

axios({
    url: `/api/gameMethods/playerStates/${this.props.playerId}/files/upload`,
    method: 'POST',
    data: {formData : filesToSubmit},
    headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data'
    }
})

Если естьпроблема с построением массива, вам нужно добавить IFormFile свойства в массив