Как правильно из React отправлять файлы на сервер(ASP.NET WebAPI), и как правильно их получать?

Question

[Senture]

У меня есть компонента на React которая отправляет изображение на сервер:

spoiler

import React, { Component } from 'react';
import axios from 'axios';

class TestUploadFIle extends Component {
  constructor() {
    super();

    this.state = {
      images: [],
    };
  }

  onImageChange = event => {
    console.log(event.target.files);

    this.setState({
      images: event.target.files,
    });
  };

  onSubmit = e => {
    e.preventDefault();

    const formData = new FormData();

    Array.from(this.state.images).forEach(image => {
      formData.append('files', image);
    });

    axios
      .post(`https://localhost:5001/api/realty`, formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input
            type="file"
            name="files"
            onChange={this.onImageChange}
            alt="image"
          />
          <br />
          <button type="submit">Send</button>
        </form>
      </div>
    );
  }
}

export default TestUploadFIle;

Код взят из интернета, для ознакомления как это вообще работает.

Вот что показывает Network в браузере при отправке

-

Но я не понимаю как эти данные получить на сервере Web API (ASP), не пойму какой тип принимать, вроде как для этого есть IFromFile

[HttpPost]
        public async Task<IActionResult> Create([FromForm] IFormFile dto)
        {
            await _orchestrator.Create(dto, await FindAccount(_userId));
            return Ok();
        }

Только вот какой я тип только не пробовал, всегда приходит null.
Я понимаю, вопрос максимально глупый, но я на нем застрял...

Другий данные(string, int, guid...) отправляю\получаю без проблем.
Как с этим разберусь, нужно будет сделать отправку строк + несколько изображений, как это правильнее делать, что использовать?

Подскажите пожалуйста в какую сторону копать?

P.S. Всем большое спасибо!

Answer 1

[Владимир Коротенко]

https://docs.microsoft.com/ru-ru/aspnet/core/mvc/m...

Прочтите вот тут. Дойду до дома скину кусок мульти загрузки файлов. Серверную и клиентскую

Comments

[Senture]

Спасибо большое, сейчас ознакомлюсь

[Владимир Коротенко]

Senture,

[HttpPost("upload")]
        public async Task<IActionResult> Upload([FromForm] UploadFileModel model)
        {
            var email = await _profileService.GetEmail(UserID);
            var info = await _sharePointService.GetCustomerInfo(email);
            if (!info.IsSuccess)
                return RenderResult(info);

            var docUri = new Uri(info.ResultData.DocumentPath);
            var uploadReq = new UploadReq
            {
                Configuration = _config.Value,
                Path = $"{docUri.AbsoluteUri}/{model.FullPath}",
                Items = new List<UploadFileItem>()
            };

            if (model.Files == null)
            {
                return NoContent();
            }

            foreach (var formFile in model.Files)
            {
                if (formFile.Length <= 0) continue;
                await using var stream = new MemoryStream();
                await formFile.CopyToAsync(stream);
                stream.Seek(0, SeekOrigin.Begin);
                var buffer = stream.GetBuffer();
                uploadReq.Items.Add(new UploadFileItem { Buffer = buffer, Name = formFile.FileName });
            }

            var result = await _sharePointService.UploadFiles(uploadReq);
            return RenderResult(result);
        }

 public class UploadFileModel
    {
        public string FullPath { get; set; }
        public IFormFileCollection Files { get; set; }
    }

export function uploadItems(url: string, body: FormData) {
  console.log("Upload files: ");
  return fetch(url, {
    method: "POST",
    body: body,
    headers: {
      Authorization: authHeader,
    },
  })
    .then((res) => res.json())
    .then(
      (result) => {
        console.log("Files uploaded");
        return result;
      },
      (error) => {
        console.log("upload file error");
        console.log(error);
      }
    );
}

{
      key: "upload",
      text: "Upload",
      iconProps: { iconName: "Upload" },
      //href: "https://developer.microsoft.com/en-us/fluentui",
      onClick: (e) => {
        const files = document.querySelector(
          'input[type="file"][multiple]'
        ) as HTMLInputElement;
        files.click();
      },
    },

 public uploadAction(uri: string, data: FormData) {
    //@ts-ignore
    this.props.setBusy(true);
    //@ts-ignore
    this.props.uploadItemsAsync(uri, data).then(
      (r: any) => {
        this.loadFiles();
      },
      (e: any) => {
        //@ts-ignore
        this.props.setBusy(false);
      }
    );
  }
  private _uploadSelected(e: any) {
    console.log("_uploadSelected");
    const state = store.getState().spfile;
    const uri = `${state.api}sharefiles/upload`;
    const formData = new FormData();
    const files = document.querySelector(
      'input[type="file"][multiple]'
    ) as HTMLInputElement;
    //@ts-ignore
    for (let i = 0; i < files?.files.length; i++) {
      //@ts-ignore
      formData.append("Files", files?.files[i]);
      console.log(files.files);
      console.log(files?.files)      
    }
    formData.append("FullPath", state.cwd);
    console.log(uri);
    console.log(formData);
    //@ts-ignore
    document.getElementById('uploadBox').firstElementChild.value = null;
    instance.uploadAction(uri, formData);
    
  }