如何解决如何使用React JS将图片上传到BYTE ARRAY格式的BYTE ARRAY格式的ASP.NET CORE WEB API,400错误的请求
我们正在尝试将一些数据发送到ASP.NET CORE WEB API服务器,并使用React中的axios发布请求将数据上传到网站,主要问题是将BYTE ARRAY格式的图像发送到服务器。服务器仅接受BYTE ARRAY格式的图像。它给我们一个错误POST400。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;
解决方法
请求失败,状态码为400
在您的代码中,我们发现您使用FileReader.readAsDataURL()
来获取所选图像的base64编码字符串,然后将数据发布到您的操作方法中。
请检查您的操作方法和可接受的参数是否如下所示。
类别类别
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
测试结果
此外,如果您想使用IFormFile
处理或保存图像文件,则可以尝试通过FormData
传递数据,而不是通过请求正文以json格式传递数据。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。