Angular4已有表单添加图片上传及进度条的实现方法

我来帮你搞定Angular4表单里的图片上传和进度条功能，一步步来哈：

一、先改表单模板 #

在你现有的文本框、下拉框表单里，添加上传控件和进度条元素就行。这里给你个示例，你可以直接套到自己的表单里：

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <!-- 你原有的文本框和下拉框，保留不变 -->
  <input type="text" name="username" ngModel placeholder="用户名">
  <select name="role" ngModel>
    <option value="admin">管理员</option>
    <option value="user">普通用户</option>
  </select>

  <!-- 新增的图片上传控件，只允许选图片 -->
  <input type="file" name="avatar" (change)="onFileSelected($event)" accept="image/*">
  
  <!-- 上传进度条，只有上传时才显示 -->
  <div class="progress" *ngIf="uploadProgress > 0">
    <div class="progress-bar" [style.width.%]="uploadProgress">{{uploadProgress}}%</div>
  </div>

  <button type="submit">提交表单</button>
</form>

二、组件里写逻辑 #

接下来处理文件选择、表单提交和进度监听。Angular4里可以用Http或者更推荐的HttpClient（Angular4.3+支持），下面两种写法都给你列出来：

1. 用传统的Http模块（兼容所有Angular4版本） #

先导入需要的模块：

import { Component } from '@angular/core';
import { Http, RequestOptions, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

然后写组件类：

@Component({
  selector: 'app-form-with-upload',
  templateUrl: './form-with-upload.component.html'
})
export class FormWithUploadComponent {
  selectedFile: File;
  uploadProgress = 0;

  constructor(private http: Http) {}

  // 选中文件时触发
  onFileSelected(event) {
    this.selectedFile = event.target.files[0];
  }

  // 提交表单的核心逻辑
  onSubmit(form) {
    // 用FormData封装所有表单数据（文本、下拉框、文件）
    const formData = new FormData();
    
    // 把原表单的文本、下拉框数据加进去
    formData.append('username', form.value.username);
    formData.append('role', form.value.role);
    
    // 如果选了图片，就把文件加进去
    if (this.selectedFile) {
      formData.append('avatar', this.selectedFile, this.selectedFile.name);
    }

    // 注意！不要手动设置Content-Type为multipart/form-data，浏览器会自动处理
    const headers = new Headers();
    const options = new RequestOptions({ headers: headers });

    // 发送请求并监听上传进度
    this.http.post('你的服务器接口地址', formData, {
      reportProgress: true, // 开启进度报告
      observe: 'events' // 监听事件流
    }).subscribe(event => {
      if (event.type === 1) { // 这是上传进度事件
        this.uploadProgress = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof Response) { // 请求完成
        console.log('上传成功啦！', event.json());
        this.uploadProgress = 0; // 重置进度条
        form.reset(); // 清空表单
      }
    }, error => {
      console.error('上传失败了...', error);
      this.uploadProgress = 0;
    });
  }
}

2. 用HttpClient（Angular4.3及以上版本推荐） #

如果你的项目用的是Angular4.3+，用HttpClient会更简洁，导入模块：

import { Component } from '@angular/core';
import { HttpClient, HttpEvent, HttpEventType } from '@angular/common/http';

组件里的请求部分改成这样：

// 提交表单的核心逻辑
onSubmit(form) {
  const formData = new FormData();
  formData.append('username', form.value.username);
  formData.append('role', form.value.role);
  if (this.selectedFile) {
    formData.append('avatar', this.selectedFile, this.selectedFile.name);
  }

  this.http.post('你的服务器接口地址', formData, {
    reportProgress: true,
    observe: 'events'
  }).subscribe((event: HttpEvent<any>) => {
    switch (event.type) {
      case HttpEventType.Sent:
        console.log('请求已经发出去啦');
        break;
      case HttpEventType.UploadProgress:
        this.uploadProgress = Math.round(100 * event.loaded / event.total);
        break;
      case HttpEventType.Response:
        console.log('上传成功！', event.body);
        this.uploadProgress = 0;
        form.reset();
    }
  }, error => {
    console.error('上传失败，看看哪里出问题了', error);
    this.uploadProgress = 0;
  });
}

三、给进度条加个样式（可选） #

默认的进度条不好看，加几行CSS让它顺眼点：

.progress {
  height: 20px;
  margin: 10px 0;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #337ab7;
  transition: width 0.3s ease;
}

四、服务器端要注意的点 #

别忘了你的服务器接口得支持multipart/form-data类型的请求，能正确解析表单里的文本字段和图片文件。比如Node.js可以用multer中间件，Java Spring可以用MultipartFile来接收文件。

几个关键提醒 #

• 一定要用FormData来封装数据，这是浏览器处理文件上传的标准方式。
• 别手动设置Content-Type为multipart/form-data，不然浏览器会丢失boundary信息，服务器就解析不了你的请求了。
• 上传完成后记得重置进度条和表单状态，给用户清晰的反馈。

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