时间戳

首页 > 解决方案 > 文件从 Angular 上传到 NodeJS 后端到 NodeJS API

node.js - 文件从 Angular 上传到 NodeJS 后端到 NodeJS API

问题描述

我在将文件从 NodeJS Web 后端转发到 NodeJS API 时遇到问题。我不太确定我错过了什么。我只知道在请求到达 API 时没有在请求中找到文件。希望有人能澄清我在这里缺少的东西。

API app.js

var routes = require('./routes/index');
app.use('/api', routes.api);

API /routes/index.js

exports.api = require('./api');

API /routes/api.js

const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer();

router.post("/file/upload", upload.any(), (req, res) => {
  console.log("==> inside file upload <===");
  console.log(req.files ? req.files.length : -1, " => num files found in request");
  res.status(200).send("File Uploaded");
});

module.exports = router;

API 控制台输出

==> inside file upload <===
0  => num files found in request
POST /api/file/upload 200 19.037 ms - 13

角 HTML

<h1 class="text-center">
  Test File Upload
</h1>

<div class="row">
  <div class="col-8 offset-4">

    <form #frmUpload method="POST" action="/api/file/upload" enctype="multipart/form-data">
      <input #inFile type="file" name="inFile" (change)="submitUpload()" />
    </form>
  
  </div>
</div>

角TS

@ViewChild("frmUpload", {static: false}) frmUpload: ElementRef;
@ViewChild("inFile", {static:false}) inFile: ElementRef;


submitUpload() {
    const _form: HTMLFormElement = this.frmUpload.nativeElement;
    _form.submit();
    setTimeout(() => {
        this.inFile.nativeElement.value = "";
    }, 500);
}

NodeJS Web 后端 app.js

var indexRouter = require('./routes/index');
app.use('/', indexRouter);

NodeJS Web 后端 /routes/index.js

const express = require('express');
const router = express.Router();
const Path = require('path');
const multer = require('multer');
const upload = multer();
const http = require('http');
const FormData = require('form-data');

router.post('/api/file/upload', upload.any(), (req, res) => {
  console.log(req.files ? req.files.length : -1, " => num files found in request");
  const { headers, files } = req;
  const { buffer, originalname: filename } = files[0];
  const formData = new FormData();
  formData.append('file', buffer, { filename });
  const postReq = http.request({
    host: "localhost",
    port: 3000,
    path: "/api/file/upload",
    headers:  formData.getHeaders(),
    method: "POST"
  }, (response) => {
    console.log("api has responded");
  });
  postReq.end(); 
  res.send("<p>File uploaded</p><div style='margin:10px;'><a href='/'>Go Back</a></div>");
});

/* GET home page. */
router.get('/', function(req, res, next) {
  console.log("..... Render Angular ......");
  res.sendFile(Path.resolve('../angular/dist/angular/index.html'));
});

module.exports = router;

NodeJS Web 后端控制台输出

1  => num files found in request
POST /api/file/upload 200 4.226 ms - 75
api has responded

查看 API 控制台输出。看看它怎么说“找到0个文件”。这就是我遇到的问题。查看 Web 后端，在我尝试将其转发到 API 之前，您会看到该文件已存在。关于我在这里做错了什么的任何想法？

标签： node.jsangularfile-upload

解决方案

您实际上需要使用管道发送表单数据。

  const postReq = http.request({
    host: "localhost",
    port: 3000,
    path: "/api/file/upload",
    headers:  formData.getHeaders(),
    method: "POST"
  }, (response) => {
    console.log("api has responded");
  });
  formData.pipe(postReq);   // <---- add this

你不需要postReq.end().

调试：

如果您真的想查看发送到 API 的内容，可以将表单数据发送到文件。它的工作原理类似。

const fs = require('fs');

const writeStream = fs.createWriteStream('./debug.log');
formData.pipe(writeStream);

文件的内容应该看起来像

----------------------------132413245123412341234
Content-Disposition: form-data; name="filename"; filename="filename.ext"
Content-Type: some/mimetype
... followed by the data

推荐阅读