时间戳

首页 > 解决方案 > 使用 angular、express 和 multer 发布图像和文本

node.js - 使用 angular、express 和 multer 发布图像和文本

问题描述

我正在自学角度并且在尝试将图像和文本发布到服务器时感到挣扎。后端在使用邮递员测试时按预期工作，但在使用角度时失败。这是我使用的代码：

上传.component.html

<form [formGroup]="uploadForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="description">Trip Name</label>
    <input type="text" name="description" class="form-control" formControlName="text" placeholder="description">
  </div>
  <div class="form-group">
    <label for="image">Cover Image</label>
    <input type="file" name="image" class="form-control-file" id="image">
  </div>

  <input type='submit' value="Submit" class="btn btn-primary" />
</form>

上传.component.ts

private preSubmit(): any {
  let input = new FormData();
  input.append('description', this.uploadForm.get('description').value);
  input.append('image', this.uploadForm.get('image').value);
  return input;
}

onSubmit() {
const newImage = this.preSubmit();
this.http.post('apiUrl', newImage)
}

节点JS

router.post('/', multer().single('image'), async (req, res) => {
const upload = {
    imgID: uuidv4(),
    description: req.body.description,
    image: req.file.originalname,
};
postparams = { Key: upload.imgID, Body: req.file.buffer };
await s3Bucket.putObject(postparams, (err, data) => {
    if (err) {
        console.log('Error uploading Image: ', err);
    } else {
        console.log('Image uploaded: ', upload.imgID);
    }
});
knex('image')
    .insert(image).then(images => {
        res.json(images)
    });
});

谢谢您的帮助！

标签： node.jsangularexpressform-data

解决方案

根据 multer 文档：Multer 不会处理任何不是多部分的表单（多部分/表单数据）。

因此，您需要在表单中添加以下内容：

enctype="多部分/表单数据"

推荐阅读