c# - 如何将图像从 React 上传到 ASP.NET Core Web API？

Question

我在 mt 服务器端有 Web API Controller

[HttpPost("CreateImage")]
    public void CreateImage([FromBody] ImageDTO img)
    {
        Image image = new Image { FileName = img.FileName };
        byte[] imageData = null;
        using (var binaryReader = new BinaryReader(img.Image.OpenReadStream()))
        {
            imageData = binaryReader.ReadBytes((int)img.Image.Length);
        }
        image.Picture = imageData;

        imageRepo.Create(image);

    }

ImageDTO 在哪里

     public class ImageDTO
    {
        public string FileName { get; set; }

        public IFormFile Image { get; set; }
    }

和像这样的Image.cs

public class Image
   {
      public int Id { get; set; }

      public string FileName{ get; set; }

      public byte[] Picture { get; set; }

      public List<User> Users { get; set; }
   }

这就是我在 React 客户端上处理和发送图像所使用的:

<form>
        <p>
            <label>Аватар</label>
            <input name="Avatar" id = 'img' type="file" class="form-control" onChange={(e)=>this.handleImageChange(e)}/>
        </p>
        <p>
            <input type="submit" value="Добавить" onClick={this.sendImage}/>
        </p>
</form>
      <div className="imgPreview">
      {$imagePreview}
    </div>

处理文件进入状态的函数

    handleImageChange(e) {
    e.preventDefault();
    let form = new FormData();
    for (var index = 0; index < e.target.files; index++) {
      var element = e.target.files[index];
      form.append('file', element);
  }
    this.setState({file: form});
  }

在服务器上发送它

async sendImage(event) {
event.preventDefault();

console.log(this.state.file);
await addImage(this.state.file);
console.log('it works');}

添加图片功能:

addImage = async ( image)  => {

    await fetch('https://localhost:44331/api/users/CreateImage',
        {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + sessionStorage.tokenKey
            },
             body:  JSON.stringify({
                FileName: 'Img',
                Image: image
            })
        }
    )
}

但是当它在服务器上发送请求时，它返回错误 400，这意味着“错误的请求”。所以我认为这可能是发送的数据类型错误或类似的东西。也许有人看到了错误或可以修复的东西。或者有人可以展示一个将图像从 React 发送到 Web Api 服务器的工作示例。我需要你们的帮助!

Answer 1

上传需要注意以下几点:

1. 你需要使用 formdata 和 FromForm
2. formdata 中的字段应与模型字段相对应。

步骤:

1. 更改 Controller 操作。

   public void CreateImage([FromForm] ImageDTO img)
   {
   
   }
   

2. 客户代码:

   async sendImage(event) {
       event.preventDefault();
       console.log(this.state.file);
       await this.addImage(this.state.file);
       console.log('it works');
   };
   addImage = async (image) => {
       await fetch('https://localhost:44385/api/users/CreateImage',
           {
               method: 'POST',
               mode: 'cors',
               headers: {
                   'Accept': 'application/json',
                   'Authorization': 'Bearer ' + sessionStorage.tokenKey
               },
               body: this.state.file
           }
       )
   }
   
   handleImageChange(e) {
       e.preventDefault();
       let form = new FormData();
       for (var index = 0; index < e.target.files.length; index++) {
           var element = e.target.files[index];
           form.append('image', element);
       }
       form.append('fileName', "Img");
       this.setState({ file: form });
   };