如何通过模型以角度附加和上传个人资料图片

我正在使用模型将数据发布到 api ,模型也有图像字段。如何将图像数据附加到coverImage 字段。每当我发送 post 请求时,它都会返回一个错误,即 coverImage 不是文件。

export class NewCourseModel {

instructorId:number;
title:string;
subtitle:string;
description:string;
language:string;
category:string;
subcategory:string;
price:number;
creationDate:Date;
coverImage:File;
promoVideo:File;

}

导出类 CreateCourseComponent 实现 OnInit {

newCourseForm: FormGroup;
  newCourseModel: NewCourseModel;
  newSectionmodel = new courseSectionmodel();
  newLectureModel = new courseLectureModel();
  newSectionFormArray=[];
  formSteps:any = 1;
  userID;
  selectedCourseImage: File = null;
  selectedCourseVideo: File = null;
  imageUrl = "/assets/images/courses/add_img.jpg";
  videoUrl = "/assets/images/courses/add_video.jpg";
  imageFileName = "No Image file selected";
  videoFileName = "No Video file selected";
  courseCategories: courseCategories[];
  courseSubCategories: courseSubCategories[];


  constructor(private _authService: AuthService,private _courseService: CoursesService) { 
    this.newCourseModel = new NewCourseModel();
    // this.courseCategories = new courseCategories();
    // this.courseSubCategories = new courseSubCategories();
  }

  ngOnInit(): void {
    this.InitializeForm();
    this.getcourseCategories();
    this.newSectionmodel = new courseSectionmodel();
    this.newSectionFormArray.push(this.newSectionmodel);
  }

  addSection(){
    this.newSectionmodel = new courseSectionmodel();
    this.newSectionFormArray.push(this.newSectionmodel)
  }

  removeSection(index){
    this.newSectionFormArray.splice(index);
  }

   InitializeForm(): any {
    this.newCourseForm = new FormGroup({
      title: new FormControl('',[Validators.required]),subtitle: new FormControl('',description: new FormControl('',language: new FormControl('',category: new FormControl('',subcategory: new FormControl('',price: new FormControl('',// creationDate: new FormControl('',// updatedDate: new FormControl('',coverImage: new FormControl('',promoVideo: new FormControl('',});
  }

  onImageSelected(event){
    
    console.log(event);
    if(event.target.files){
      var reader = new FileReader();
      reader.readAsDataURL(event.target.files[0]);
      reader.onload=(e:any)=>{
        this.imageUrl=e.target.result;
      }
      this.selectedCourseImage = event.target.files[0];
      this.imageFileName = this.selectedCourseImage.name;
      this.newCourseForm.patchValue({coverImage: this.selectedCourseImage})
      console.log(reader.result);
    }
  }

  // uploadFile(file) {
  //   const formData = new FormData();
  //   formData.append('CourseCoverImage',file.data);
  //   console.log(formData);
  // }

  onVideoSelected(event){
    if(event.target.files){
      var vreader = new FileReader();
      vreader.readAsDataURL(event.target.files[0]);
      vreader.onload=(ev:any)=>{
        this.videoUrl=ev.target.result;
      }
      this.selectedCourseVideo = event.target.files[0];
      this.newCourseForm.patchValue({promoVideo:this.selectedCourseVideo});
      console.log(this.selectedCourseVideo);
      this.videoFileName = this.selectedCourseVideo.name;
    }
  }

  submitCourse(){

      // console.log(this.newCourseForm.controls);
      // alert("form Submitted")
      // var authorId = this._authService.user.value.userId
      if (this.newCourseForm.valid){
        console.log(this.newCourseForm.value)
        this._authService.user.subscribe(c=>this.userID=c.userId);
        this.newCourseModel.instructorId = this.userID;
        this.newCourseModel.title = this.newCourseForm.controls.title.value;
        this.newCourseModel.subtitle = this.newCourseForm.controls.subtitle.value;
        this.newCourseModel.description = this.newCourseForm.controls.description.value;
        this.newCourseModel.category = this.newCourseForm.controls.category.value;
        this.newCourseModel.subcategory = this.newCourseForm.controls.subcategory.value;
        this.newCourseModel.price = this.newCourseForm.controls.price.value;
        this.newCourseModel.language = this.newCourseForm.controls.language.value;
        
        this.newCourseModel.coverImage = this.newCourseForm.controls.coverImage.value;
        this.newCourseModel.promoVideo = this.newCourseForm.controls.promoVideo.value;
        var currentDate = new Date();
        this.newCourseModel.creationDate = currentDate;
        console.log(this.newCourseModel);
        this._authService.PostData('courses/',this.newCourseForm.getRawValue()).subscribe(
          c => {
          console.log(c);
          }
        )
      }
  }

  getcourseCategories(){
    this._courseService.getdata("/category/").subscribe(result=>{
      this.courseCategories = result;
      console.log(this.courseCategories);
    })
  }

  getcourseSubCategories(){
    this._courseService.getdata("/category/subcategory/").subscribe(result=>{
      if (result.categoryId == this.courseCategories){
        this.courseSubCategories = result
      }
      console.log(this.courseSubCategories);
    })
  }

  CategorySelected($event){
    
  }

}

当我将图像发布到其他仅获取图像的 api url 时,它可以像这样正常工作。

public formData = new FormData();

uploadFiles( event ) {
        const file = event.target.files[0];
        // console.log( 'file',file )
         this.formData.append( "image",file );
    }

RequestUpload() {
            this._authService.PostData( 'category/images/',this.formData )
                .subscribe((result) => {    
                  console.log(result);             
                });     
    }

我的问题是如何获取表单数据,将其附加到课程模型并通过邮寄发送。

zmw7152 回答:如何通过模型以角度附加和上传个人资料图片

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/870.html

大家都在问