Angular：上传附件，并在查看页面（view.component.html）展示之前用户上传的附件

一、新增(add)修改(update)页面上的文件上传：

用户在系统的新增页面上，上传了一些附件：

在页面中我们需要使用上传控件的一些方法，保证附件能够顺利上传并存储，还需要控制上传完成的附件可以进行删除操作：

 <div nz-col [nzSpan]="16">
                <nz-form-item nzFlex>
                  <nz-form-label nz-col [nzSpan]="8" nzFor="baseFiles">上传附件
                    <nz-tooltip>
                      <button nz-button nz-tooltip style="border:none;padding: 0px;">
                        <i class="anticon anticon-question-circle-o"></i>
                      </button>
                      <ng-template #nzTemplate>
                        <div>1、文件格式支持：{{acceptFileType}}</div>
                        <div>2、文件大小：小于50M</div>
                      </ng-template>
                    </nz-tooltip>
                  </nz-form-label>
                  <nz-form-control nz-col [nzSpan]="12">
                    <nz-upload [nzAction]="image_upload_url" [(nzFileList)]="fileList" [nzRemove]="handleRemove"
                      (nzChange)="handleChange($event)" [nzHeaders]="requestHeader" [nzBeforeUpload]="beforeFileUpload"
                      [nzAccept]="acceptFileType">
                      <button nz-button>
                        <i class="anticon anticon-upload"></i><span>添加</span>
                      </button>
                    </nz-upload>
                  </nz-form-control>
                </nz-form-item>
              </div>

其中，<nz-tooltip>标签中显示了一个圆点按钮，鼠标浮动时会显示提示信息：

1、文件格式支持：————（acceptFileType文件格式绑定组件中的acceptType这一参数进行维护）

acceptFileType = '';           // 可接受的文件类型
constructor(
    private fb: FormBuilder,
    private router: Router,
    private globalProvider: GlobalProvider,
    private uploadProvider: FileUploadProvider,
    private MesCenterProvider: MesCenterProvider,
    private notice: NoticeProvider,
    private activatedRoute: ActivatedRoute,
    private modalService: NzModalService,
  ) {
    this.acceptFileType = this.globalProvider.acceptFileType;
    ..........
    }

2、文件大小：小于50M

[nzAction]="image_upload_url"是在ts组件中绑定的文件上传路径，这里是：

image_upload_url = this.appConfig.api.base_url + '/upload/sysUpload/add';

[(nzFileList)]="fileList"是上传文件的列表，在组件中，可以在查看页面上，根据文件的id查询显示上传的文件：

/**
   * 根据id查询附件
   * @param id
   */
  getFile(baseFiles) {
    baseFiles.forEach(item => {
      const file = {
        id: item.fileId,
        uid: item.fileId,
        name: item.fileName,
        status: 'done',
        url: this.MesManagementProvider.getDownloadUrl(item.filePath),
        message: 'success'
      };
      this.fileList = [...this.fileList, file];
      this.fileInfoList.push(item);
    });
  }

[nzRemove]="handleRemove"是文件移除时的回调，点击上传过的文件后的删除按钮，可以将上传过的文件从fileList中删除：

 /**
   * 附件移除时回调
   */
  handleRemove = (file: UploadFile) => {
    let id;
    if (!helpers.IsEmpty(file.response)) {
      id = file.response.data.id;
    } else {
      id = file.id;
    }
    const index = this.fileInfoList.findIndex(item => item === id);
    this.fileInfoList.splice(index, 1);
    return true;
  }

(nzChange)="handleChange($event)"是在文件开始、上传进度、完成、失败时都会调用的方法：

 /**
  * 开始、上传进度、完成、失败都会调用这个函数。
  */
  handleChange({ file, fileId, fileName, filePath }): void {
    const status = file.status;
    if (status === 'done') {
      if (file.response.status === 0) { 
        this.notice.info('上传成功');
        this.fileList.forEach(item => {
          fileId = item.response.data.id,
            fileName = item.name,
            filePath = item.response.data.url,                 // 上传时带消息url
            this.fileInfoList.push({ fileId, fileName, filePath });
        });
        this.validateForm.value.baseFiles = this.fileInfoList;
      } else {
        this.notice.error(file.response.message);
        this.validateForm.controls['baseFiles'] = null;
        this.fileList.splice(this.fileList.length - 1, 1);
      }
    } else if (status === 'error') {
      this.notice.error('上传失败');
    }
  }

上传成功file.response.status状态码为0，失败状态码为1。上传成功时存储文件id：fileId，文件名称fileName和文件路径filePath，并塞到fileInfoList文件数组中存储。

[nzHeaders]="requestHeader" 是设置上传的请求头部，IE10 以上有效：

/**
   * 设置上传的请求头部，IE10 以上有效；注意：务必使用 => 定义处理方法。
   */
  requestHeader = (file: UploadFile) => {
    return this.uploadProvider.setRdequestHeaders();
  }

在uploadProvider服务中设置请求头：

/**
   * 设置请求头
   */
  setRdequestHeaders() {
    const tokenInfo = this.globalData.tokenInfo;
    const XCMG = `Bearer ${tokenInfo.access_token}`;
    return {
      Authorization: XCMG
    };
  }

[nzBeforeUpload]="beforeFileUpload"是在文件上传之前调用的，限制上传文件的大小：

beforeFileUpload = (file): Boolean => {
    if (file && file.size > 50 * 1024 * 1024) {
      this.notice.error('上传的文件不能超过50M！');
      return false;
    } else {
      return true;
    }
  }

以上就可以保证文件在新增或修改页面上可以顺利上传。

 

二、查看页面上，点击下载查看上传的附件：

在查看页面上，调用接口查询附件列表，显示在页面上，并可以点击下载文件查看：

  <div nz-col [nzSpan]="16">
                <nz-form-item nzFlex>
                  <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="8" nzFor="historyFiles">历史附件
                  </nz-form-label>
                  <nz-form-control nz-col [nzSpan]="12">
                    <ng-container>
                      <nz-upload [nzAction]="image_upload_url" [(nzFileList)]="fileList" [nzRemove]="false"></nz-upload>
                    </ng-container>
                  </nz-form-control>
                </nz-form-item>
              </div>