Как загрузить вложение на сервер, Net Core + React (Redux)

Question

Я хотел бы добавить вложение, я использую .net core 2.0 и реагирую (избыточность). На бэкэнде у меня есть ORM db EF. Это модель:

    public byte[] Attachment { get; set; }

Мое вложение содержится в байте [] на серверной части. Это мой код React: Функция:

   fileSelectedHandler = event => {
    this.setState({
        attachment: event.target.files[0]
    })
}

Конструктор:

 this.state = {
   attachment: null
 }

onSubmit:

    const fd = new FormData();
     const test = fd.append('attachment', this.state.attachment, 
     this.state.attachment.name);

     const reportData = {
            attachment: test
        };
    this.props.addReport(reportData, url);

К сожалению, это не работает, я понятия не имею, чтобы решить эту проблему.

РЕШЕНИЕ:

    fileSelectedHandler = event => {
        let reader = new FileReader();
        reader.readAsDataURL(event.target.files[0]);
        if(event.target.files[0].size < 2097152){ // max 2mb files
            reader.onloadend = () => {
                this.setState({
                    attachment : reader.result.split(';base64,')[1]
                }) 
            };
        }
        else{
            tost.error('Plik powinien być mniejszy niż 2mb.'); // tost.error for file should be smaller than 2mb
            reader.onloadend = () => {
                this.setState({
                    attachment : null
                }) 
            };
        }

ReportAction:

  // Add Report
     export const addReport = (postData, prevUrl) => dispatch => {
      const config = {
    headers: {
      'enctype' : 'multipart/form-data' // it's important!
    }
  }
    axios
      .post(`${API_ROUTE}/api/Reports`, postData, config)
      .then( () => {
        const toastrOptions = {
          timeOut: 2000
        }
        if(prevUrl === "/reports"){
          dispatch(getReports())
        }
        tost.success('Pomyślnie dodano raport', toastrOptions);
      })
      .catch(err => {
        tost.error(err.response.data.errorMessage);
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })}
      );
};

Бэкэнд-контроллер:

    [AllowAnonymous]
    [HttpPost]
    public async Task<IActionResult> Add([FromBody] ReportDto reportDto)
    {
        var report = _mapper.Map<ReportDto, Report>(reportDto);

        var addedReport = await _service.AddReport(report);

        var uri = Request.PathBase.Value.ToString();

        return Created(uri, addedReport);
    }

ReportDto - это те же реквизиты, что и выше.

Answer 1

Сначала вы должны изменить выбранное вложение файла для формы данных

function toFormData(file: File) {
    const data = new FormData();
    data.append("file", file);
    return data;
}

Затем вы должны отправить данные формы, используя вот что:

async function uploadFile(url: string, file: File, onProgress?: (progress: number) => void) {
    const data = toFormData(file);
    const xhr = new XMLHttpRequest();
    return new Promise((resolve, reject) => {
        if (typeof onProgress === "function") {
            xhr.upload.onprogress = event => {
                onProgress(event.loaded / event.total);
            };
        }

        xhr.onload = () => {
            let response;
            try {
                response = JSON.parse(xhr.response);
            } catch (err) {
                response = xhr.response;
            }

            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(response);
                return;
            }
            reject(response);
        };

        xhr.onerror = err => {
            reject(err);
        };

        xhr.open("POST", url);
        xhr.send(data);
    });
}

И, наконец, вы можете использовать отправленное вложение в действии, используя интерфейс IFormFile:

[HttpPost]
[Route("Attachment")]
public async Task Attachment([FromForm] IFormFile file)
{
    // do sth with attachment
}