时间戳

首页 > 解决方案 > 如何将文件从 angular7 上传到 Node.js 服务器

node.js - 如何将文件从 angular7 上传到 Node.js 服务器

问题描述

我的 node.js 代码由 Postman 100% 工作，但是当我发送 aFormData并且服务器中没有任何事情发生时，没有错误但文件没有上传。我如何通过角度上传文件？

HTML 组件：

<form>
  <input type="file" (change)="OnFileSelected($event)" name='photo'>
  <button type='submit' (click)="OnUpload()">Save Post</button>
</form>

TS组件：

OnFileSelected(event){
  this.SelectedFile = event.target.files[0] as File;
}
OnUpload(){
  const form: FormData = new FormData();
  form.append('photo', this.SelectedFile, this.SelectedFile.name);
  //Convert to Json because 'Unexpected token - in JSON at position 0 at JSON.parse' error in server
  let responseBody: {} = JSON.stringify(form);
  this.http.post(URL, responseBody).subscribe(event => { console.log(event)}, err => {console.log(err)
    });
  }

Node.js 服务器：

const path = require('path');
const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser')
const router = express.Router();
const DIR = './uploads';
let storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, DIR);
  },
  filename: (req, file, cb) => {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
  }
});
let upload = multer({ storage: storage });
router.use(bodyParser.json());
router.use(bodyParser.urlencoded({ extended: true }));
router.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});
router.post('/upload-image', upload.single('photo'),  async function (req, res) {
  console.log(req.body);
  if (!req.file) {
    console.log("No file received");
    return res.send({
      success: false
    });
  } else { 
    console.log('file: ',req.file);
    return res.send({
      success: true
    })
  }
});

标签： node.jsangular

解决方案

将文件传输到服务器的方法有很多，如果是常见的场景，那么我会建议使用 Dropzone.js 角度包装器。最好有一个自定义角度组件，其中包含 Dropzone 的所有自定义配置，以满足您的需求。

使用起来也很简单，安装完包后，文件输入就这么简单：

<dropzone [config]="config" [message]="'Click or drag images here to upload'"

(error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>

文档可以在这里找到： https ://www.npmjs.com/package/ngx-dropzone-wrapper

推荐阅读