发布到asp.net核心Web api的数据导致空参数

Question

我有一个React前端应用程序，我在其中使用Axios将数据发布到后端。

我有一个文件输入控件，在这里我需要将带有图像标题的图像的base64发布到Web api，以便以后将其存储在云存储中。

带有输入的My 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应该发布到我的Web 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属性始终为null。我究竟做错了什么？

我如何从我的react应用程序发送值有问题吗？

Answer 1

Fields更改为

Properties。

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