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

Question

我在 mt 服务器端有 Web API 控制器

\n\n

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

\n\n

ImageDTO 在哪里

\n\n

     public class ImageDTO\n    {\n        public string FileName { get; set; }\n\n        public IFormFile Image { get; set; }\n    }\n

\n\n

和 Image.cs 像这样

\n\n

public class Image\n   {\n      public int Id { get; set; }\n\n      public string FileName{ get; set; }\n\n      public byte[] Picture { get; set; }\n\n      public List<User> Users { get; set; }\n   }\n

\n\n

这就是我在 React 客户端上处理和发送图像的方法：

\n\n

<form>\n        <p>\n            <label>\xd0\x90\xd0\xb2\xd0\xb0\xd1\x82\xd0\xb0\xd1\x80</label>\n            <input name="Avatar" id = \'img\' type="file" class="form-control" onChange={(e)=>this.handleImageChange(e)}/>\n        </p>\n        <p>\n            <input type="submit" value="\xd0\x94\xd0\xbe\xd0\xb1\xd0\xb0\xd0\xb2\xd0\xb8\xd1\x82\xd1\x8c" onClick={this.sendImage}/>\n        </p>\n</form>\n      <div className="imgPreview">\n      {$imagePreview}\n    </div>\n

\n\n

将文件处理为状态的函数

\n\n

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

\n\n

将其发送到服务器上

\n\n

async sendImage(event) {\nevent.preventDefault();\n\nconsole.log(this.state.file);\nawait addImage(this.state.file);\nconsole.log(\'it works\');}\n

\n\n

添加图像函数：

\n\n

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

\n\n

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

\n

Answer 1

上传时需要注意以下几点：

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

脚步：

1. 更改控制器操作。

   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 });
   };