如何使用 React JS 以 BYTE ARRAY 格式将图像上传到 ASP.NET CORE WEB API，400 错误请求

Question

We are trying to send some data to the ASP.NET CORE WEB API server and upload that data to a website using axios post request in React and the main problem is in sending image in BYTE ARRAY format to a server. Server accepts images only in BYTE ARRAY format. It gives us an error POST 400. Upload.jsx:47 Error: Request failed with status code 400. Please help. Here is the our code using react hooks:

import React, { useState } from "react";
import axios from "axios";

const Upload = () => {
  const [upload, setUpload] = useState({
    ruName: "",
    azName: "",
    kaName: "",
    enName: "",
    image: null,
    shopId: localStorage.getItem("shopId")
  });

  const changeHandler = e => {
    setUpload({ [e.target.name]: e.target.value });
  };

  const uploadHandler = async e => {
    const base64 = await convertBase64(e.target.files[0]);
    setUpload({ image: base64 });
  };

  const convertBase64 = file => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);

      fileReader.onload = () => {
        resolve(fileReader.result);
      };

      fileReader.onerror = error => {
        reject(error);
      };
    });
  };

  const onAddCategory = async e => {
    e.preventDefault();
    try {
      const res = await axios.post(
        "https://midamoapi.ge/api/productcategories/",
        upload
      );
      console.log(res);

    } catch (err) {
      console.log(err);
    }
  };

  console.log(upload);

  return (
    <div className="container-add">
      <input name="ruName" onChange={changeHandler} type="text" />
      <input name="azName" onChange={changeHandler} type="text" />
      <input name="enName" onChange={changeHandler} type="text" />
      <input name="kaName" onChange={changeHandler} type="text" />
      <input name="image" type="file" onChange={uploadHandler} />
      <button className="btn" onClick={onAddCategory}>
        Submit
      </button>
    </div>
  );
};

export default Upload;

Answer 1

Request failed with status code 400

In your code, we can find that you use FileReader.readAsDataURL() to get a base64 encoded string of the selected image, then post the data to your action method.

Please check if your action method and accepted parameter look like below.

Category class

public class Category
{
    public string RuName { get; set; }
    public string AzName { get; set; }
    public string EnName { get; set; }
    public string KaName { get; set; }
    public string Image { get; set; }  //please note that Image property is string type
    public int ShopId { get; set; }
}

Action method

[HttpPost]
public IActionResult AddCategory(Category category)
{
    //...
    //your code logic here

Test Result

Besides, if you'd like to process or save the image file using IFormFile , you can try to pass the data via FormData rather than in json format data through request body.