文件未从 Angular 发送到 Nodejs

Posted 2023-03-07

【中文标题】文件未从 Angular 发送到 Nodejs

【英文标题】：File not sending from Angular to Nodejs

【发布时间】：2020-05-29 11:38:19

【问题描述】：

我正在使用 ngx-awesome-uploader 将我的图像添加到 Angular 以发送到后端。我正在尝试将文件发送到我的 nodejs 后端，但它一直在文件应该位于的后端返回 。以前从未处理过文件，但我会进行有根据的猜测并说那里应该有一些东西。

在前端，文件似乎要发送，因为console.log(fileUpload.file);

输出

后端输出

File Upload Section
 file: , fileName: 'image.png' 

但从控制台输出中可以看到，在后端收到时为空。不知道为什么。感谢您的帮助！

文件选择器.adapter.ts

import  FilePreviewModel  from 'ngx-awesome-uploader';
import  HttpRequest, HttpClient, HttpEvent, HttpEventType  from '@angular/common/http';
import  map  from 'rxjs/operators';
import  Observable  from 'rxjs';
import  FilePickerAdapter  from 'ngx-awesome-uploader';
import  FilePreviewModelWithAuctionId  from './file-upload.model';
import  environment  from 'src/environments/environment';

export class DemoFilePickerAdapter 
  constructor(private http: HttpClient) 
  
  public uploadFile(fileItem: FilePreviewModel) 
    const form = new FormData();
    form.append('file', fileItem.file);

    console.log("FILE OUTPUT");
    console.log(fileItem.file);

    const api = environment.api_url + "/fileupload";
    const req = new HttpRequest('POST', api, fileItem,  reportProgress: true );
    return this.http.request(req)
      .pipe(
        map((res: HttpEvent<any>) => 
          if (res.type === HttpEventType.Response) 
            return res.body.id.toString();
           else if (res.type === HttpEventType.UploadProgress) 
            // Compute and show the % done:
            const UploadProgress = +Math.round((100 * res.loaded) / res.total);
            return UploadProgress;
          
        )
      );


  

app.js

app.post("/api/fileupload", checkAuth, (req, res, next) => 

  console.log("File Upload Section")
  console.log(req.body)


  blobService.createContainerIfNotExists('testcontainer', 
    publicAccessLevel: 'blob'
  , function (error, result, response) 
    if (!error) 
      // if result = true, container was created.
      // if result = false, container already existed.
    
  );

  blobService.createBlockBlobFromLocalFile('testcontainer', 'taskblob', req.body.file, function (error, result, response) 
    if (!error) 
      // file uploaded
    
  );



);

文件预览模型

export interface FilePreviewModel 
    fileId?: string;
    file: File | Blob;
    fileName: string;

FilePreviewModelWithAuctionId

export interface FilePreviewModelWithAuctionId 
  fileId?: string;
  file: File | Blob;
  fileName: string;
  auctionId: string;

【问题讨论】：

您是否想要一个答案，显示如何直接从您的客户端执行此操作，以便您可以绕过您的后端？

【参考方案1】：

您已经声明了一个表单，但它从未被使用过。请尝试以下操作：

import  FilePreviewModel  from 'ngx-awesome-uploader';
import  HttpRequest, HttpClient, HttpEvent, HttpEventType  from '@angular/common/http';
import  map  from 'rxjs/operators';
import  Observable  from 'rxjs';
import  FilePickerAdapter  from 'ngx-awesome-uploader';
import  FilePreviewModelWithAuctionId  from './file-upload.model';
import  environment  from 'src/environments/environment';

export class DemoFilePickerAdapter 
  constructor(private http: HttpClient) 
  
  public uploadFile(fileItem: FilePreviewModel) 
    let form = new FormData();
    form.append('file', fileItem.file);

    console.log("FILE OUTPUT");
    console.log(fileItem.file);

    const api = environment.api_url + "/fileupload";
    const req = new HttpRequest('POST', api, form ,  reportProgress: true );
    return this.http.request(req)
      .pipe(
        map((res: HttpEvent<any>) => 
          if (res.type === HttpEventType.Response) 
            return res.body.id.toString();
           else if (res.type === HttpEventType.UploadProgress) 
            // Compute and show the % done:
            const UploadProgress = +Math.round((100 * res.loaded) / res.total);
            return UploadProgress;
          
        )
      );


  

【讨论】：

我把我的代码换成了你的，但它仍然在后端输出没有价值

您可以检查网络选项卡并检查文件内容是否正在发送到 /fileupload 路由？

是的。如果您查看顶部的文件输出。您可以看到它在api/fileupload 处输出文件名。只是不是文件。这是网络选项卡输出：postimg.cc/G9JQR15g

console.log和http请求的内容是有区别的。单击网络选项卡中的第二个条目 (POST) 并检查内容是否实际发布到 API

如果我点击 POST，则输出如下：postimg.cc/svKCvqvw。

【参考方案2】：

您忘记指定内容类型，因此找不到文件。

将此标头添加到您的请求中。

let headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options =  headers: headers, reportProgress: true  ;

const api = environment.api_url + "/fileupload";
const req = new HttpRequest('POST', api, form , options );

---

更新：

我没有看到您的服务器中也缺少 multipart/form-data 的处理程序。

按照以下步骤操作：

npm install --save multer

在你的 nodejs 应用中导入 multer：

const multer = require('multer');
const upload = multer(dest: 'public/uploads/').single('file');

修改你的端点：

app.post("/api/fileupload", checkAuth, upload, (req, res, next) => 
console.log(req.file);
...

【讨论】：

我尝试了两种方法，但它仍然返回 也许我做错了？ pastebin.com/pPPQxj37

用我修改后的答案再试一次。

它仍然返回 这是网络标签的截图。现在似乎看不到标题postimg.cc/pyfqtVY4这是我更新的代码：pastebin.com/7cEFJ2RK

请使用更新的答案重试。如果一切正常，请告诉我。

我添加了您的更改，当我将文件发送到后端时，我得到MulterError: Unexpected field