发布到 asp.net core web api 的数据导致参数为空

Question

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

我有一个文件输入控件，我需要将带有图像标题的图像的 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 应该发布到我的 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
}

我的 web 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;
}

但是，我的文件名和 base64String 属性始终为空。我究竟做错了什么？

我从 React 应用程序发送值的方式有问题吗？

Answer 1

要使模型属性绑定起作用，您需要将模型 Fields 更改为 Properties。

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