Angular6项目upload上传图片功能实现

根据angular6的特性，我们选择符合其本身的框架ng-zorro，这是一款angular的框架，详情请了解ng-zorro官网。

上传图片功能是根据ng-zorro的upload插件进行修改参数值，从而符合我们的需要的功能，具体实现如下：

找到Upload的插件地址，根据angular特性，进行引入此模块，但是在此之前首先保证引入了追个ng-zorro框架，方法如下

1、、首先在app.module.ts文件中引入ng-zorro框架插件

import { NgZorroAntdModule, NZ_I18N, en_US, zh_CN} from 'ng-zorro-antd';

2、在想要使用的组建中引入upload组件

import { UploadXHRArgs } from 'ng-zorro-antd';

3、然后就可以直接在html文件中引入upload插件

    
       上传        
       
    

4、上面就可以正常使用了，如果要把上传的图片通过接口传到后台，nzAction={{actionApi}}就是储存图片的后台服务器地址，然后在通过函数把上传的图片的地址传递给后台，从而形成数据交互。所需函数如下，可以在最后一个自定义上传案例中找到。

 customReq = (item: UploadXHRArgs) => {
    this.fileStatus = false;
    this.responseData = [];
    // 构建一个 FormData 对象，用于存储文件或其他参数
    const formData = new FormData();
    // tslint:disable-next-line:no-any
    formData.append('file', item.file as any);
    const req = new HttpRequest('POST', item.action!, formData, {
      reportProgress: true,
      withCredentials: true
    });
    // 始终返回一个 `Subscription` 对象，nz-upload 会在适当时机自动取消订阅
    return this.http.request(req).subscribe(
      (event: HttpEvent<{}>) => {
        if (event.type === HttpEventType.UploadProgress) {
          if (event.total! > 0) {
            // tslint:disable-next-line:no-any
            (event as any).percent = (event.loaded / event.total!) * 100;
          }
          // 处理上传进度条，必须指定 `percent` 属性来表示进度
          item.onProgress!(event, item.file!);
        } else if (event instanceof HttpResponse) {
          // 处理成功
          this.fileStatus = true;
          this.responseData = event.body;
          this.filePath = this.responseData.data;
          item.onSuccess!(event.body, item.file!, event);
        }
      },
      err => {
        // 处理失败
        item.onError!(err, item.file!);
      }
    );
  };

5、处理成功下面是我们需要给后台传递的参数，this.filePath = this.responseData.data;

6、如果是通过表单提交给后台，那么可能会出现一个问题，点击上传按钮的时候表单直接提交了，这时候我们需要吧upload的html代码中的button代码添加上一个type="button"，这样点击upload按钮就不会把表单信息直接提交了。

7、如果想要对上传的图片做出相应的格式限制，并且显示出相应的提示信息，比如限制PNG格式，上传了其他格式文件我们就会进行提示，代码如下：

beforeUpload = (file: UploadFile):boolean => {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      this.alertTitle = "图片格式仅支持JPG！";
      $('.zmalert').fadeIn().delay(1500).fadeOut();
      return false;
    }
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isLt2M) {
      this.alertTitle = "图片格式大小不能超过5M";
      $('.zmalert').fadeIn().delay(1500).fadeOut();
      return false;
    }
  };

在此之前要先引入提示模块NzMessageService，之后就可以愉快的试用了，又什么问题可以随时评论哦，互相学习！