использование Axios для публикации загруженного изображения приводит к пустой коллекции файлов

Question

   const fd = new FormData();
    fd.append('image', this.state.selectedFile, this.state.selectedFile.name);
    const postData = {
        method: 'POST',
        credentials: 'include',
        body: fd
    }

    //this correctly shows the image object and name:
    console.log('selected image file name: ', this.state.selectedFile.name);
    console.log('select image: ', this.state.selectedFile);

    axios({
        method: 'post',
        url: `/api/gameStats/profileImage/${this.props.profileId}/files/upload`,
        postData
    })
    .then(function (response) {
        console.log('then: ', response);
    })
    .catch(function (response) {
        console.log('catch: ', response);
    });


   [HttpPost("upload")]
    public virtual async Task<IActionResult> PostMulti(Int64 parentId, ICollection<IFormFile> fileData)
    {
        'fileData is always empty... :(

        TParent parent;

        using (var tran = Session.BeginTransaction()) {
            parent = Repository.GetParent(parentId);
            if (!Security.CanCreate(CurrentUser, parent, null))
                return StatusCode(HttpStatusCode.Forbidden);
            tran.Rollback();
        }

        foreach (var file in fileData) {
            await SaveFile(file, parent);
        }

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

Answer 1

Вы должны передать обязательное поле data в объекте запроса axios, как указано здесь

// data - это данные, которые будут отправлены как тело запроса // Применимо только для методов запроса «PUT», «POST» и «PATCH» // Когда не установлено transformRequest, должен быть один из следующих типов: // - строка, обычный объект, ArrayBuffer, ArrayBufferView, URLSearchParams// - Только браузер: FormData, File, Blob // - Только узел: Stream, данные буфера: {firstName: 'Fred'},

axios({
        method: 'post',
        url: `/api/gameStats/profileImage/${this.props.profileId}/files/upload`,
        data: postData
    })

PS вам не нужно передаватьимя файла, при добавлении к FormData, поскольку оно происходит от него автоматически, если оно имеет тип File, как указано здесь .

Имя файла, сообщаемое серверу (USVString), когда Blob или File передается в качестве второго параметра.Имя файла по умолчанию для объектов Blob - «blob».Имя файла по умолчанию для объектов File - это имя файла.

fd.append('image', this.state.selectedFile);