Данные, отправленные в asp. net core web api, приводят к нулевым параметрам

Question

У меня есть клиентское приложение React, где я использую Ax ios для отправки данных на сервер.

У меня есть элемент управления вводом файлов, в котором мне нужно опубликовать base64 для изображения с заголовком изображения в web api, чтобы позже сохранить его в облачном хранилище.

Мой файл Form.tsx с входными данными выглядит следующим образом:

const AprtmentForm = () => {

  const fileUploadHandler = (files: any) => {
    console.log(files[0])
    var reader : FileReader = new FileReader(); 

    reader.onload = function(event){
      var contents = event.target?.result
      console.log(contents!.toString())

       agent.Images.create(contents!.toString(), 'test');
    }

    var s = reader.readAsDataURL(files[0])
  }


  return (
    <Container style={{ marginTop: "10em" }}>
      <div>
        <label htmlFor="file" className="ui icon button">
          <i className="file icon"></i>
          Open File
        </label>
        <input type="file" id="file" style={{ display: "none" }} onChange={e => fileUploadHandler(e.target.files)}/>
      </div>
    </Container>
  );
};

agent.Images.create должен публиковаться в моем веб-API, он выглядит следующим образом:

const requests = {
    get: (url: string) => axios.get(url).then(responseBody), 
    post: (url: string, body: {}) => axios.post(url, body).then(responseBody), 
    put: (url: string, body: {}) => axios.put(url, body).then(responseBody), 
    delete: (url: string) => axios.delete(url).then(responseBody)
}

const Images = {
    list: () : Promise<IApartment[]> => requests.get('/apartments'), 
    details: (id: string) => requests.get(`/apartments/${id}`), 
    create: (base64String: string, fileName: string) => requests.post('/Images',{ 'base64String': base64String, 'fileName': fileName} ), 
    update: (apartment: IApartment) => requests.put(`/apartments/${apartment.id}`, apartment), 
    delete: (id: string) => requests.delete(`/apartments/${id}`)
}

export default {
    Images
}

Мой почтовый индекс веб-API выглядит следующим образом:

  [HttpPost]
    public async Task Add([FromBody] Image Image ){




          string connectionString = "storageconnection";
            BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);
            BlobContainerClient containerClient =  blobServiceClient.GetBlobContainerClient("containername");
            BlobClient blobClient = containerClient.GetBlobClient(Image.fileName);

            //Convert Base64 Encoded string to Byte Array.
            byte[] imageBytes = Convert.FromBase64String(Image.base64String);
            System.IO.Stream stream = new System.IO.MemoryStream(imageBytes);

            await blobClient.UploadAsync(stream, true);

        }


public class Image{
     public string base64String;
     public  string fileName;
}

Однако мои свойства filename и base64String всегда равны нулю. Что я делаю неправильно?

Что-то не так с тем, как я отправляю значения из моего приложения реагирования?

Answer 1

Чтобы привязка свойств модели работала, вам нужно изменить модель Поля на Свойства .

public class Image
{
  public string base64String { get; set; }
  public string fileName { get; set; }
}