将图像提交添加到我的ReactJS / .NET Web API CRUD应用程序

问题描述

我有一个带React / Redux前端的.NET Web API，用于汽车经销商。我已经成功执行了完整的CRUD操作，但是现在尝试使用上传图像时遇到了问题。

我的车辆模型与我的图像模型有一对多的关系，但是现在我只是尝试发布1张图像（因此，还没有遍历一系列图像，但是我很乐意接受同样的建议。这是图像模型：

  public class Image
  {
    public int ImageId { get; set; }
    public string ImageTitle { get; set; }
    public byte[] ImageData { get; set; }
    public int VehicleId { get; set; }
    public virtual Vehicle Vehicle { get; set; }
  } 
}

我在表单中有一个功能部件来添加新的载具：

function NewVehicleForm() {
  
  const classes = useStyles();
  const history = useHistory();

  let featured;
  const handleChange = (event) => {
    event.target.name = event.target.checked;
    console.log("Handle change: ",event.target.name)
    featured = event.target.name;
  }

  let vehicleImages = [];
  const handleFileChange = (event) => {
    vehicleImages = vehicleImages.concat(event[0]);
    console.log("vehicleImage: ",vehicleImages);
  };
  
  function addVehicleToDatabase(event) {
    event.preventDefault();
    console.log("event: ",event.target)
    console.log("image: ",event.target.imageField)
    console.log("file: ",event.currentTarget.files)
    const vehicle = {
      vehicleTitle: event.target.year.value + " " + event.target.make.value + " " + event.target.model.value,featured: featured,make: event.target.make.value,model: event.target.model.value,year: event.target.year.value,vin: event.target.vin.value,stockNumber: event.target.vin.value.slice(-4),condition: event.target.condition.value,price: event.target.price.value,availability: event.target.availability.value,exteriorColor: event.target.exteriorColor.value,interiorColor: event.target.interiorColor.value,doors: event.target.doors.value,fuelType: event.target.fuelType.value,engine: event.target.engine.value,transmission: event.target.transmission.value,mileage: event.target.mileage.value,images: vehicleImages
    }
    console.log("VEHICLE: ",vehicle)
    addVehicle(vehicle);
    history.push('/dashboard');
  }

  async function addVehicle(newVehicle) {
    await fetch(`http://localhost:5000/api/vehicles/`,{
      method: 'POST',headers: {
        'Content-Type': 'application/json'
      },body: JSON.stringify(newVehicle)
    })
  }

    return (
...

如果我在这里没有提供足够的代码，我很乐意提供更多的代码，但是我只是不想被淹没。

从我读到的内容来看，我应该使用'Content-Type': 'multiform/data'进行发布，但是不确定在发布之前仍要处理数据的同时如何实现它。我看到我也可以转换为base 64，但这不一定是明智的选择吗？我从没做过。

在这里提出任何建议都是很受欢迎的。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）