文件從 Angular 上傳到 NodeJS 后端到 NodeJS API

Question

我在將文件從我的 NodeJS Web 后端轉發到我的 NodeJS API 時遇到了麻煩。 我不太確定我錯過了什么。 我只知道在請求到達 API 時沒有在請求中找到文件。 希望有人能澄清我在這里缺少的東西。

API 應用程序.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 之前，您將看到該文件已存在。 關於我在這里做錯了什么的任何想法？

Answer 1

您實際上需要使用管道發送表單數據。

  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