Question

我已经有这个问题已经有一段时间了，我无法在任何地方找到解决办法。我想要做的是允许用户在他们的个人资料上更新他们的头像。但是，当我尝试将文件传递给我的节点服务器时，formData字段为空。我尝试过其他人给出的多种解决方案，但没有一种方法有效。

这是我的个人资料html组件：

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

这是我的个人资料打字稿组件：

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' });
                }
            }
        }
    })
});

然而，问题发生在profile typescript组件中。不使用formData.get（'selectFile'），formData字段为空，我无法弄清楚为什么它没有被填充。

提前感谢您的回复。

Answer 1

您的前端代码看起来不错。您可以使用“express-fileupload”软件包并在快速应用程序中配置它

类似这样的事情

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

app.use(fileUpload());

在路线方面

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

});

Answer 2

对于nodejs，您可以使用multer。请参阅下面的基本使用示例。有关详细信息，请查看here

Text track

Answer 3

您可以尝试express-fileupload我在很多项目中使用它，它更容易实现和配置。

使用angular和node.js上传图像

3 个答案: