【问题标题】:I am trying to populate database with the image, image-name, image-number and image-price but only image column is filled我正在尝试使用图像、图像名称、图像编号和图像价格填充数据库,但仅填充图像列
【发布时间】:2019-05-28 02:05:18
【问题描述】:

我使用 Angular 作为前端,使用 .NET Web API 作为后端,使用 SQL Server 2012。我正在尝试使用图像、图像名称、编号和价格填充我的数据库,但只填充图像。

角度

image.component.ts

imageUrl:String="";
 fileToUpload:File=null;

 handleImageChange(file: FileList){
   this.fileToUpload = file.item(0);
   var reader = new FileReader();
   reader.onload=(event:any)=>{
     this.imageUrl=event.target.result;
   }
   reader.readAsDataURL(this.fileToUpload);
 }
uploadImage(imageData){
    console.log(0)
    let name=imageData.name;
    let number=imageData.number;
    let price=imageData.price;
    this.service.uploadImage(this.fileToUpload, name, number, price).subscribe(
      data=>{
        alert("successfully uploaded");
        this.productForm.reset();
        this.imageUrl="";
      }
    );
  }

image.service.ts

 baseUrl:string="http://localhost:62215/api/product/";

  uploadImage(fileToUpload:File, imagename:string, num:string, price:string){


    let formData:FormData = new FormData();
    formData.append("file",fileToUpload,fileToUpload.name);
    formData.append("Imagename",name);
    formData.append("Number",num);
    formData.append("Price",price);

    return this.http.post(this.baseUrl+"UploadImage",formData,this.httpOptions);  
  }

.NET Web API

ProductController.cs

[HttpPost]
[Route("UploadImage")]
public IHttpActionResult UploadImage()
{
    HttpRequest Request = HttpContext.Current.Request;

    try
    {
        if (Request.Files.Count > 0)
        {
            using (FreeShareEntities obj = new FreeShareEntities())
            {
                foreach (string file in Request.Files)
                {
                    var postedFile = Request.Files[file];
                    var filePath = HttpContext.Current.Server.MapPath("~/Images/" + postedFile.FileName);
                    postedFile.SaveAs(filePath);

                    ImageDemo image = new ImageDemo();
                    image.Name = Request["name"];
                    image.Image = postedFile.FileName;
                    image.Number = Request["num"];
                    image.Price = Request["price"];

                    obj.ImageDemoes.Add(image);
                    obj.SaveChanges();
                }
            }

            return Ok(true);
        }
    }
    catch (DbEntityValidationException dbEx)
    {
        foreach (var validationErrors in dbEx.EntityValidationErrors)
        {
            foreach (var validationError in validationErrors.ValidationErrors)
            {
                Trace.TraceInformation("Property: {0} Error: {1}", validationError.PropertyName, validationError.ErrorMessage);
            }
        }
    }

    return NotFound();
}

我期望的是填充我的数据库表的所有字段,但不仅仅是一个字段。

【问题讨论】:

  • 您必须使用断点检查包含数据的请求

标签: .net angular asp.net-web-api sql-server-2012


【解决方案1】:

您从请求中获得的密钥与您发送的表单数据密钥不同。

formData.append("Imagename",name)
image.Name = Request["name"];

应该是

image.Name = Request["Imagename"];

与其他不匹配相同。

如果它仍然不起作用,我会建议一个替代方案。您使用表单数据发送数据不妨利用 FromForm 属性。

例如

public IHttpActionResult UploadImage([FromForm]UploadDto dto)
{
    var postedFile = dto.File;
    var filePath = 
    HttpContext.Current.Server.MapPath("~/Images/" + postedFile.FileName);
    postedFile.SaveAs(filePath);

    ImageDemo image = new ImageDemo();
    image.Name = dto.Name;
    image.Image = postedFile.FileName;
    image.Number = dto.Number;
    image.Price = dto.Price;

    obj.ImageDemoes.Add(image);
    obj.SaveChanges();
}

public class UploadDto
{
    public string Name { get; set; }
    public int Number{ get; set; }
    public int Price{ get; set; }
    public IFormFile File{ get; set; }
}

我使用这种方法已经有一段时间了,效果很好。请记住,您在表单数据上附加的键应该与您的模型属性相同。

我希望这会有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-12
    • 2011-08-15
    • 2013-11-05
    • 2011-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多