NG-ZORRO中Upload插件的实际运用

用到的插件：既可以预览还可以删除图片

图片上传的插件
这个是官网里这个插件的源代码

import { Component } from '@angular/core';
import { UploadFile } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-upload-picture-card',
  template: `
    

      
        
        
Upload
      
      
        
          
        
      
    
  `,
  styles: [
    `
      i[nz-icon] {
        font-size: 32px;
        color: #999;
      }
      .ant-upload-text {
        margin-top: 8px;
        color: #666;
      }
    `
  ]
})
export class NzDemoUploadPictureCardComponent {
  showUploadList = {
    showPreviewIcon: true,
    showRemoveIcon: true,
    hidePreviewIconInNonImage: true
  };
  fileList = [
    {
      uid: -1,
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
    }
  ];
  previewImage: string | undefined = '';
  previewVisible = false;

  constructor() {}

  handlePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  };
}

就是与后台对接的时候有点毛病，刚开始没弄好，现在整理一下咳咳~
HTML

    站点图片：
    
        
            
上传
        
        
            
                
            
        
    

里面的API请参考官方文档

这个里面这个是图片上传时接口：

注意：页面这里的fileList要属性绑定，单向赋值，不要用ngModel去双向绑定。

TS

previewImage: string | undefined = '';
previewVisible = false;
showUploadList = {
    showPreviewIcon: true,
    showRemoveIcon: true,
    hidePreviewIconInNonImage: true
};
handlePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
};
//点击文件链接或预览图标时的回调
picturePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
}
//上传图片
upLoadChange(event) {
    let file = event ? event.file : null;
    let datas = file && file.id ? file : file.response && file.response.rlt == 0 && file.response.datas;
    if (datas) {
        if (event.type == 'success') {
            datas['uid'] = datas.id;
            this.station.resourceimageList.push(datas);
            // console.log('after upload', this.station.resourceimageList);
        } else if (event.type == 'removed') {
            this.deleteImageById(datas.id, this.station.resourceimageList);
            // console.log('after removed', this.station.resourceimageList);
        }
    }
}
private getInfo(id) {
    this.service.getInfo(id).then(res => {
        // console.log('编辑页详细数据', res)
        if (res) {
            this.station = res;
            if (res.resourceimageList && res.resourceimageList.length > 0) {
                res.resourceimageList.forEach(element => {
                    element['uid'] = element.id; // 插件需要通过uid 来删除其中的数据
                    element['url'] = '/harbor_upload/' + element.saveName;
                })
            }
        } else {
            console.log('接口调用失败')
        }
    })
}
private deleteImageById(id, arr) {
    let index = arr.findIndex(ele => ele.id == id)
    if (arr.length > 0 && index != -1) {
        arr.splice(index, 1);
    }
}

其余的什么图片预览直接把例子里面的弄过来，主要是上传的时候的逻辑
upLoadChange的时候

就点击上传的时候有三个状态

这是点击移除的时候

当上传成功时（type=“success”）


在fileList里面，前两个是编辑页面传给页面显示的两张图，后面的一张图是新上传的图片数据信息。
所以这里要通过有没有id去区分是后台传过来的图片还是重新上传的图片

let datas = file && file.id ? file : file.response && file.response.rlt == 0 && file.response.datas;
//如果有id那么datas就是这个file，如果外面没有id，那datas=file.response.datas

每次上传成功的时候，给每个datas加上uid属性，因为这个插件是根据uid去删除界面上图片的
每次获得编辑页面图片数据的时候，同样给它添加uid属性，同时还要添加url属性，保证它的元素路径，在页面上显示

像这种插件还是主要要结合它的文档，根据实际情况去分析。目前用的这种方法去控制后台需要的数据和前端页面的显示。还要多多努力~~