我正在使用模型将数据发布到 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);
});
}
我的问题是如何获取表单数据,将其附加到课程模型并通过邮寄发送。