使用axios上传reactJs文件时出现空对象错误

Question

我正在尝试使用 axios 上传图像，但它似乎总是为空，我无法修复它。发布请求通过 201 成功，但是当我发布请求表单前端时，这给出了空对象错误。我只是无法配置为什么会发生这种情况以及解决此问题的方法。

This is the error popup in the controller.

错误表示 ImageData 为空。我已将我的reactjs 代码连同此一起包含在内，以供您参考。 要提交的表单的一部分。

export default class Upload extends Component {
  constructor(props) {
    super(props);
    const pharmacyName = this.props.location.pharmacyName;
    this.state = {
      Date_time: "",
      Status: "",
      Status2: "",
      CustomerName: "",
      PatientName: "",
      PatientAge: 0,
      Address: "",
      Email: "",
      TeleNo: 0,
      Customer_id: 1,
      Pharmacy_id: 1,
      PharmacyName: pharmacyName ? pharmacyName : "",
      ImageData: null,
      Image:"",
      ImageSource: "",
    };
    this.changeHandler = this.changeHandler.bind(this);
  }

  changeHandler = (e) => {
    if (e.target.name === "ImageData") {
      this.setState({
        ImageData: URL.createObjectURL(e.target.files[0]),
      });
    } else {
      this.setState({ 
        [e.target.name]: e.target.value,
      });
    }
    console.log("final payload", this.state)
  };

  submitHandler = (e) => {
    console.log("e", e)
    e.preventDefault();
    console.log(this.state);
    axios
      .post('/api/Orders', this.state)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    const {
      Date_time,
      Status,
      Status2,
      CustomerName,
      PatientName,
      PatientAge,
      Address,
      Email,
      TeleNo,
      Customer_id,
      Pharmacy_id,
      ImageData,
    } = this.state;
    return (
      <div className="outer">
        <div className="inner2">
          <form onSubmit={this.submitHandler}>
            <h3>Upload Your Prescription Below</h3>
           
              <input
                type="file"
                name="ImageData"
                placeholder="Upload Your Prescription Here"
                onChange={this.changeHandler}
              />

控制器：

public async Task<ActionResult<Order>> PostOrder([FromForm] Order order)
        {
            order.Image = await _iorderService.SaveImage(order.ImageData); //save image

            _context.Order.Add(order);
            await _context.SaveChangesAsync();

            return StatusCode(201);
        }

enter code here

模型类：

 public class Order
    {
        [Key]
        public int OrderID { get; set; }
        public DateTime Date_time { get; set; }
        public string Status { get; set; }
        public string Status2 { get; set; }
        public string PharmacyName { get; set; }
        public string CustomerName { get; set; }
        public string PatientName { get; set; }
        public int PatientAge { get; set; }
        public string Address { get; set; }
        public string Email { get; set; }
        public int TeleNo { get; set; }
        public int Customer_id { get; set; }

        
        public string Image { get; set;}

        [NotMapped]
        public IFormFile ImageData { get; set; }
        [NotMapped]
        public String ImageSource { get; set; }
        //[ForeignKey("Pharmacy")]
        public int Pharmacy_id { get; set; }
        //public Pharmacy Pharmacy { get; set; }
    }
}

OrderService.cs：

public class OrderService : IOrderService
    {
        private readonly IWebHostEnvironment _hostEnvironment;
        public OrderService(IWebHostEnvironment hostEnvironment)
        {
            _hostEnvironment = hostEnvironment;
        }


        [NonAction]

        public async Task<string> SaveImage(IFormFile ImageData)
        {
            string imageName = new string(Path.GetFileNameWithoutExtension(ImageData.FileName).Take(10).ToArray()).Replace(' ', '-');
            imageName = imageName + DateTime.Now.ToString("yymmssfff") + Path.GetExtension(ImageData.FileName);
            var imagePath = Path.Combine(_hostEnvironment.ContentRootPath, "Images", imageName);
            using (var fileStream = new FileStream(imagePath, FileMode.Create))
            {
                await ImageData.CopyToAsync(fileStream);
            }
            return imageName;
        }

        [NonAction]
        public void DeleteImage(String imageName)
        {
            var imagePath = Path.Combine(_hostEnvironment.ContentRootPath, "Images", imageName);
            if (File.Exists(imagePath))
                File.Delete(imagePath);


        }
    }
}

IOrderService.cs：

{
    public interface IOrderService
    {
        Task<string> SaveImage(IFormFile ImageData);

        void DeleteImage(String imageName);
    }
}

Answer 1

我正在尝试使用 axios 上传图像，但它似乎总是为空，我无法修复它。

ImageData: URL.createObjectURL(e.target.files[0])

公共异步任务 SaveImage(IFormFile ImageData)

请注意，URL.createObjectURL() 方法将返回指定 File 对象或 Blob 对象的对象 URL，您将该对象 URL 存储在 ImageData 并传递给接受 IFormFile 类型的后端 API 操作 SaveImage参数，这将导致发布的数据无法绑定到参数。

如果您想用选定的文件向SaveImage 端点发出请求，您可以直接存储e.target.files[0] 而不是存储对象 URL，然后用表单数据发出 HTTP 请求（填充选定的文件）从 reactJS 前端使用 axios 等。