angleとnode.jsを使った画像アップロード

Question

私は今この問題を抱えていましたが、どこでも修正を見つけることはできません。私がしたいことは、ユーザーがプロファイル上でアバターを更新できるようにすることです。しかし、ノード・サーバーにファイルを渡そうとすると、formDataフィールドは空です。私は他人から与えられた複数の解決策を試してきましたが、どちらも働いていませんでした。ここで

は私のプロフィールのHTMLコンポーネントである：ここで

<form [formGroup]="form" > 
    <input type="file" id="selectFile" name="selectFile" [disabled]="uploading" formControlName="selectFile" (change)="uploadImage($event)" > 
</form> 

は私のプロフィールtypescriptですコンポーネントです：

uploadImage(evt) { 
    this.createAuthenticationHeaders(); 
    const files = evt.target.files; 
    console.log('Uploading file...', files); 

    if (files.length > 0) { 
     let file; 
     let formData = new FormData(); 
     for (let i = 0; i < files.length; i++) { 
     file = files[i]; 
     formData.append('selectFile', file); 
     } 
     console.log(formData); 


    this.uploadService.updateImage(formData.get('selectFile')).subscribe(res => res.json()); 
    } 
} 

ここに私のアップロードサービスされます。ここで、その要求

updateImage(formdata) { 
    let url = this.baseUrl + '/authentication/profile/avatar/update'; 
    console.log(formdata); 
    return this.http.post(url, formdata).catch(this.errorHandler); 
} 

ここにはあります処理する必要があります：

router.post('/profile/avatar/update', (req, res) => { 
    console.log(req.params); 
    User.findOne({ _id: req.decoded.userId }).select('username email').exec((err, user) => { 
     if (err) { 
      res.json({ success: false, message: err }); 
     } else { 
      if (!user) { 
       res.json({ success: false, message: 'Could not find user' }); 
      } else { 
       if (fs.existsSync('C:/Users/Jake/Desktop/apis/client/src/assets/uploads/profiles/' + user.username + user.username + '/avatar.png')) { 
        res.json({ success: true, message: '../../assets/uploads/profiles/' + user.username + user.username + '/avatar.png' }); 
       } else { 
        res.json({ success: false, message: '../../assets/uploads/profiles/default/default.jpg' }); 
       } 
      } 
     } 
    }) 
}); 

ただし、プロファイルのtypescriptコンポーネントで問題が発生しています。 formData.get（ 'selectFile'）を使用しないと、formDataフィールドは空であり、なぜ満たされていないのかわかりません。

返信いただきありがとうございます。

Answer 1

フロントエンドコードは見栄えが良いです。あなたはmulterを使用することができますnodejsのルート側

router.post('/profile/avatar/update', (req, res) => { 
    console.log(req.files); // this will contain your file. 

}); 

Answer 2

でこの

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

app.use(fileUpload()); 

よう

何か「を表現し、ファイルアップロード」のパッケージを使用して、明示アプリでそれを設定することができます。基本的な使用例は下記をご覧ください。詳細については、あなたは私が多くのプロジェクトでそれを使用express-fileuploadを試すことができますhere

var express = require('express') 
var multer = require('multer') 
var upload = multer({ dest: 'uploads/' }) 

var app = express() 

app.post('/profile', upload.single('avatar'), function (req, res, next) { 

}) 

Answer 3

を確認することができ、実装して構成することが容易です。