Multer不上传文件

时间:2019-07-28 10:29:17

标签: javascript angular multer

我有一个以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应该上传文件。 我不知道我在做什么错? 感想

0 个答案:

没有答案