【ant-design】-upload组件个性化实现上传文件

一、项目需求

要求：

1. 可通过点击灰色区域打开系统的文件选择器，或将文件选择窗口中的文件拖动到灰色区域实现选择文件；
2. 文件在选择中限制可选择的文件类型并且不可选择文件夹；
3. 选择文件之后，列表显示选择的文件【文件名+删除按钮】；
4. 选择文件后，不立刻实现文件上传，在用户点击确定按钮之后，将文件以列表的方式上传到后端。

二、实现分析

1. 首先我们的项目是angular并且使用ant-design的组件库，所以选用ant-design 的upload 组件。

<div class="content">
      <!--
      1.nztype：文件可拖拽；
      2.nzAccept：限制文件可选择的类型；
      3.nzMultiple：是否可多选文件；
      4.nzBeforeUpload：文件上传前的钩子函数，要求使用箭头函数进行处理。
      -->
      <nz-upload
        nzType="drag"
        nzAccept=".zip,.lic"
        [nzMultiple]="true"
        [nzBeforeUpload]="beforeUpload">
        <div class="uploadBtn">
          <div class="center">
            <input id="uploadPut" type="file" style="display: none"/>
            <div class="upload-img">
              <img src="assets/icon/file-update.png" alt="文件上传" style="height: 66px"/>