Javascript 如何使用React JS，400 bad request以字节数组格式将图像上载到ASP.NET核心WEB API

我们正在尝试向ASP.NET CORE WEB API服务器发送一些数据，并使用React中的axios post请求将这些数据上载到网站，主要问题是以字节数组格式向服务器发送图像。服务器只接受字节数组格式的图像。它给了我们一个错误后400。Upload.jsx:47错误：请求失败，状态代码为400。请帮忙。下面是我们使用react钩子的代码：

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;

import React，{useState}来自“React”；
从“axios”导入axios；
常量上传=（）=>{
const[upload，setUpload]=使用状态({
RunName:“”，
名称：“，
假名：“”，
尊称：“，
图像：空，
shopId:localStorage.getItem（“shopId”）
});
常量changeHandler=e=>{
setUpload（{[e.target.name]：e.target.value}）；
};
常量uploadHandler=async e=>{
const base64=wait convertBase64（e.target.files[0]）；
setUpload（{image:base64}）；
};
const convertBase64=文件=>{
返回新承诺（（解决、拒绝）=>{
const fileReader=new fileReader（）；
fileReader.readAsDataURL（文件）；
fileReader.onload=（）=>{
解析（fileReader.result）；
};
fileReader.onerror=错误=>{
拒绝（错误）；
};
});
};
const onAddCategory=async e=>{
e、 预防默认值（）；
试一试{
const res=等待axios.post(
"https://midamoapi.ge/api/productcategories/",
上传
);
控制台日志（res）；
}捕捉（错误）{
控制台日志（err）；
}
};
控制台日志（上传）；
返回(
提交
);
};
导出默认上传；

请求失败，状态代码为400

在代码中，我们可以发现您使用

FileReader.readAsDataURL（）

获取所选图像的base64编码字符串，然后将数据发布到操作方法

请检查您的操作方法和接受的参数是否如下所示

类别类

作用方法

测试结果

---

此外，如果您想使用

ifformfile

处理或保存图像文件，您可以尝试通过

FormData

传递数据，而不是通过请求正文传递json格式的数据。

Hi@GreatData，有关于此情况的更新吗？如果回复确实有助于解决问题，您可以。

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

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