我有一个以HTML格式上传上载的按钮,用于拍摄图像,并使用Filereader使用readAsDataURL读取文件,并将reader.result保存在数组中
<mat-card>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<form [formGroup]='form' (submit)="onSavePost()" *ngIf="!isLoading">
<mat-form-field>
<input
matInput type="text"
name="title"
formControlName="title"
placeholder="Post Title">
<mat-error *ngIf="form.get('title').invalid">Please enter title</mat-error>
</mat-form-field>
<div>
<button mat-stroked-button type="button" (click)="filePicker.click()">Pick Image</button>
<input type="file" #filePicker (change)="onImagePicked($event)">
</div>
<div class="image-preview" *ngFor="let imagePreview of imagesObject">
<div class="nested-image-preview" *ngIf="imagePreview !==null && imagePreview && form.get('image').valid">
<img [src]='imagePreview' [alt]='form.value.title'>
<div class="Deletebutton">
<button mat-stroked-button type="button">Delete</button>
</div>
</div>
</div>
<mat-form-field>
<textarea
matInput rows="6"
name="content"
formControlName="content"
placeholder="Post Content"></textarea>
<mat-error *ngIf="form.get('content').invalid">Please enter Content</mat-error>
</mat-form-field>
<button
mat-raised-button
color="primary"
type="submit">Save post</button>
</form>
onImagePicked(event:Event){
const file = (event.target as HTMLInputElement).files[0]
this.form.patchValue({image:file})
this.form.get('image').updateValueAndValidity()
const reader=new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.imagesObject.push(reader.result as string)
}
}
现在提交通话中保存的帖子
onSavePost(){
if(this.form.invalid){
return;
}
this.isLoading=true
if(this.mode==='create'){
this.postService.onAddPost(
this.form.value.title,
this.form.value.content,
this.form.value.imagesObject
)
}
else{
this.postService.updatePost(this.postId,this.form.value.title,this.form.value.content)
}
this.form.reset()
}
在post.service中
onAddPost(title:string,content:string,imagesObject:Array<string>){
const postData=new FormData()
postData.append("title",title)
postData.append("content",content)
for(let image in imagesObject){
postData.append("image[]",image)
}
this.http.post<{message:string,postId:String}>('http://localhost:3000/api/posts',postData)
.subscribe((responseData)=>{
const post:Post={
id:responseData.postId,
title:title,
content:content
}
this.posts.push(post)
this.postsUpdated.next([...this.posts])
this.router.navigate(["/"])
})
}
在后端,我使用multer上传文件。
outer.post('',multer({storage:storage}).array("image",12),(req,res,next)=>{
const post= new Post({
title:req.body.title,
content:req.body.content
})
post.save().then(createdPost=>
res.status(201).json({
message:'Post added sucessfully',
postId:createdPost._id
})
)
})
由此,multer应该上传文件。 我不知道我在做什么错? 感想