今天完成的事情：

学习ng-zorron图片上传，

下午开始感冒加重，头晕的，实在熬不住了就早点回去了。
明天计划的事情：

学习用组件做搜索，将图片上传完善。
遇到的问题：

暂无。
收获：

根据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插件

<div class="input-upload-box">

    <nz-upload nzAction={{actionApi}} [nzCustomRequest]="customReq"          

       [(nzFileList)]="fileList" [nzShowButton]="fileList.length<1" nzListType="picture"  

       [nzBeforeUpload]="beforeUpload">

       <button nz-button type="button"><i nz-icon nzType="upload"></i><span>上传</span>        

       </button>

    </nz-upload>

</div>

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;

    }

  }