TypeError：パスは文字列またはバッファMEANスタックでなければなりません

Question

フロントエンドではAngular 5、バックエンドではNode、データベースではMongoを使用しています。今私はデータベースに画像を保存しようとしていますが、このエラーは常に発生しています。私がファイルを使って作業しているのは間違いであるかどうかは分かりません。私は研究をしましたが、角度1.xを指しています。

HTMLコンポーネント

<form [formGroup]="form" (ngSubmit)="onSubmitPhoto()"> 
    <div class="form-group"> 
     <input type="file" class="form-control" formControlName="photo"> 
    </div> 
    <button class="btn btn-default" type="submit">Sačuvaj</button> 
    </form> 

TSコンポーネント

onSubmitPhoto() { 
this.profile.photo = this.form.value.photo; 
this.usersService.updatePhoto(this.profile, this.id) 
    .subscribe(
    data => { 
    this.router.navigateByUrl('/'); 
    }, 
    error => console.error(error) 
); 
} 

サービス

updatePhoto(profile: Profile, id: string) { 
    const body = new FormData(); 
    body.append('photo', profile.photo); 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    return this.http.post('http://localhost:3000/profile/photo/' + id, body, { headers: headers }) 
     .map((response: Response) => response.json()) 
     .catch((error: Response) => { 
      return Observable.throw(error.json()); 
     }); 
} 

Node.jsの

router.post('/photo/:id', (req, res) => { 
    console.log(req.files); 
    User.find({ _id: req.params.id }) 
    .exec((err, user) => { 
     if (err) { 
      return res.status(500).json({ 
       title: 'An error occured', 
       error: err 
      }); 
     } 
     user.img.data = fs.readFileSync(req.files); 
     user.img.contentType = 'image/png'; 
     user.save((err, obj) => { 
      if (err) { 
       throw err 
      } 
      console.log('success') 
     }) 
    }); 
}); 

モデル

const schema = new Schema({ 
    img: { data: Buffer, contentType: String} 
}); 
module.exports = mongoose.model('User', schema); 

すべてのヘルプは高く評価されます。 また、ログreq.filesは未定義を返します。そのあなたの考える

user.img.data = fs.readFileSync(req.body.photo); 

：

interface Profile { 
    photo: File; 
} 

updatePhoto(profile: Profile, id: string) { 
    const body = new FormData(); 
    body.append('photo',profile.photo); 
    return this.http.post(`http://localhost:3000/profile/photo/${id}`, body,) 
     .map((response: Response) => response.json()) 
     .catch((error: Response) => { 
      return Observable.throw(error.json()); 
     }); 
} 

はまた、あなたのバックエンドが最も可能性の高い次のセクションで失敗している：あなたは、次のようFormDataインスタンスでそれを包む必要なファイルをアップロードするには

Answer 1

multipart/form-dataエンコーディングのフォームをアップロードしている場合は、expressjs doc

に記載されているように、ミドルウェアを使用してバックエンドのリクエストを解析する必要がありますあなたは第二で行く場合は、次が必要になります multerまたは express-fileupload

を使用することができ

：

const fileUpload = require('express-fileupload'); 

router.use(fileUpload());// use express-fileupload as default parser for multipart/form-data encoding 

router.post('/photo/:id', (req, res) => { 
User.find({ _id: req.params.id }) 
    .exec((err, user) => { 
     if (err) { 
      return res.status(500).json({ 
       title: 'An error occured', 
       error: err 
      }); 
     } 
     user.img.data = req.files.photo.data; 
     user.img.contentType = 'image/png'; 
     user.save((err, obj) => { 
      if (err) { 
       throw err 
      } 
      console.log('success') 
     }) 
    }); 
});