Angular 4组件如何上传文件并携带登录用户信息至Node后端？

我之前也碰到过类似的问题，ng2-file-upload确实默认更专注文件上传本身，但它其实提供了很灵活的扩展方式，完全可以满足你把用户信息和文件一起发送的需求。下面分两种常用方案给你具体的代码示例：

方案一：通过additionalParameter传递用户信息 #

这种方式适合把用户的明文信息（比如用户ID、用户名）作为表单数据的一部分，和文件一起提交，后端可以直接从表单字段中读取。

Component.ts 代码 #

import { Component } from '@angular/core';
import { FileUploader, FileItem } from 'ng2-file-upload';

@Component({
  selector: 'app-solution',
  templateUrl: './solution.component.html',
  styleUrls: ['./solution.component.css']
})
export class SolutionComponent {
  uploader: FileUploader;
  hasBaseDropZoneOver = false;
  // 假设你已经从登录状态中获取了当前用户信息
  currentUser = {
    userId: 'user_123',
    username: 'iamsaquib8',
    email: 'example@mail.com'
  };

  constructor() {
    // 初始化文件上传器
    this.uploader = new FileUploader({
      url: 'http://your-node-server/api/upload', // 替换成你的后端上传接口
      itemAlias: 'userFile', // 和后端约定的文件字段名
      // 在这里添加用户信息作为额外参数
      additionalParameter: {
        userId: this.currentUser.userId,
        username: this.currentUser.username,
        email: this.currentUser.email
        // 可以根据需求添加更多用户相关字段
      }
    });

    // 监听上传成功事件（可选）
    this.uploader.onSuccessItem = (item: FileItem, response: string, status: number) => {
      console.log(`文件 ${item.file.name} 上传成功`, JSON.parse(response));
    };

    // 监听上传失败事件（可选）
    this.uploader.onErrorItem = (item: FileItem, response: string, status: number) => {
      console.error(`文件 ${item.file.name} 上传失败`, response);
    };
  }

  // 拖拽区域样式切换（可选）
  fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }
}

HTML 代码 #

<div class="upload-wrapper">
  <h3>上传文件并携带用户信息</h3>
  
  <!-- 基础文件选择按钮 -->
  <input type="file" ng2FileSelect [uploader]="uploader" accept=".pdf,.docx,.xlsx" />

  <!-- 拖拽上传区域（可选） -->
  <div class="drop-zone"
       ng2FileDrop
       [uploader]="uploader"
       (fileOver)="fileOverBase($event)"
       [class.active-drop]="hasBaseDropZoneOver">
    拖拽文件到此处上传
  </div>

  <!-- 上传控制按钮 -->
  <button type="button" 
          (click)="uploader.uploadAll()" 
          [disabled]="!uploader.getNotUploadedItems().length">
    开始上传
  </button>
  <button type="button" 
          (click)="uploader.clearQueue()" 
          [disabled]="uploader.queue.length === 0">
    清空队列
  </button>

  <!-- 上传进度列表（可选） -->
  <div class="upload-list" *ngIf="uploader.queue.length > 0">
    <h4>上传队列</h4>
    <ul>
      <li *ngFor="let item of uploader.queue">
        {{ item.file.name }} 
        <span class="progress">{{ item.progress }}%</span>
      </li>
    </ul>
  </div>
</div>

方案二：通过请求头携带用户标识（比如JWT Token） #

如果你的用户身份是通过Token验证的，更推荐用请求头传递，安全性更高：

修改Component.ts中的上传器配置 #

this.uploader = new FileUploader({
  url: 'http://your-node-server/api/upload',
  itemAlias: 'userFile',
  // 设置请求头，携带用户Token
  headers: [
    { name: 'Authorization', value: `Bearer ${this.currentUser.authToken}` }
  ]
});

Node后端接收示例（Express框架） #

不管用哪种方案，后端都能轻松读取到文件和用户信息：

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const app = express();

// 配置CORS，允许自定义请求头（如果用方案二的话）
app.use(cors({
  allowedHeaders: ['Authorization', 'Content-Type']
}));

// 配置文件存储路径
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads');
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});
const upload = multer({ storage });

// 处理上传请求
app.post('/api/upload', upload.single('userFile'), (req, res) => {
  // 读取方案一中的用户参数
  const { userId, username, email } = req.body;
  // 读取方案二中的Token
  const authToken = req.headers.authorization?.split(' ')[1];
  // 读取上传的文件
  const uploadedFile = req.file;

  console.log('接收的用户信息:', { userId, username, email, authToken });
  console.log('接收的文件:', uploadedFile);

  // 这里写你的业务逻辑，比如保存文件、关联用户记录等

  res.status(200).json({ 
    message: '文件上传成功',
    fileId: uploadedFile.filename.split('-')[0]
  });
});

app.listen(3001, () => {
  console.log('后端服务启动在3001端口');
});

注意事项 #

• 确保additionalParameter中的字段名和后端接收的参数名完全一致
• 如果使用请求头传递Token，要确保后端CORS配置允许携带对应的自定义头
• 上传大文件时，可以开启ng2-file-upload的分块上传功能（需要后端配合实现分块合并逻辑）

内容的提问来源于stack exchange，提问作者iamsaquib8