使用 Angular 和 node.js 上传图片答案

【问题标题】：Image upload with angular and node.js使用 Angular 和 node.js 上传图片
【发布时间】：2018-01-14 00:06:50
【问题描述】：

这个问题我已经有一段时间了，我无法在任何地方找到解决方法。我想做的是允许用户在他们的个人资料上更新他们的头像。但是，当我尝试将文件传递给我的节点服务器时，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' });
                }
            }
        }
    })
});

但是，配置文件打字稿组件中出现了问题。如果不使用 formData.get('selectFile')，formData 字段是空的，我不知道为什么它没有被填充。

提前感谢您的回复。

【问题讨论】：

标签： node.js mongodb angular express mean-stack

【解决方案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.

});

【讨论】：

【解决方案2】：

对于 nodejs，您可以使用 multer。请参阅下面的基本用法示例。更多详情可以查看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) {

})

【讨论】：

【解决方案3】：

你可以试试express-fileupload我在很多项目中都使用过，比较容易实现和配置。

【讨论】：