sn-filer

基于angular 7.0 + ng-zorro-antd + viewer.js 实现的文件上传、预览组件。

安装

npm install ng-zorro-antd --save
# 依赖ng-zorro-antd，配置请参照官方文档#
# https://ng.ant.design/docs/getting-started/zh

npm install viewerjs --save

npm install sn-filer --save

参数

sn-pop-preview

imgList : 图片数据源。

type: POPIMGLIST[] { url: string; alt: string; }

---

snWidht : 显示图片宽度。

type: string, eg: '20px'.

---

snHeight : 显示图片高度。

type: string, eg: '20px'.

---

sn-page-preview

imgList : 图片数据源。

type: IMGLIST[] { url: string; }

---

snHeight : 容器高度；默认300px。

type: string, eg: '20px'.

---

snPageBtnClick : 翻页回调方法；返回当前图片的索引。

eg: (snPageBtnClick)="onPageBtnClick($event)"

sn-file-upload

snAccept : 支持文件格式，如：'image/png, image/jpeg'。

snFileNum : 支持上传文件个数。

snListType : 显示样式，可选 "text"（默认）、"picture-card"。

type: string

---

snFileList : 文件列表。

eg: [(snFileList)]="seFileList"

UploadFile {
  uid: string;
  size: number;
  name: string;
  filename?: string;
  lastModified?: string;
  lastModifiedDate?: Date;
  url?: string;
  status?: UploadFileStatus;
  originFileObj?: File;
  percent?: number;
  thumbUrl?: string;
  response?: any;
  error?: any;
  linkProps?: any;
  type: string;
  [key: string]: any;
}

---

snUploadUrl : 上传文件网关。

eg: [snUploadUrl]="https://xxxxxxxxxx.xxx"

---

snUploadData : 上传文件mapping参数，snIsMapping为true有效。

eg: [snUploadData]={ url: "", params: {} }

---

snRemoveCallback : 删除回调方法。

eg: (snRemoveCallback)="removeCallback($event)"

---

snUploadCallback : 上传回调方法。

eg: (snUploadCallback)="uploadCallback($event)"

Usage

• Import viewer.css and viewer.js in angular.json.

{
    ...
    "styles": [
        "node_modules/viewerjs/dist/viewer.min.css"
    ],
    "scripts": [
        "node_modules/viewerjs/dist/viewer.min.js"
    ]
    ...
}

• Import SnFilerModule in app.module.ts.

import { SnFilerModule } from 'sn-filer';

@NgModule({
  ...
  imports: [
    ...
    SnFilerModule
  ],
  ...
})

• Model use

import { IMGLIST } from 'sn-filer';

• Component use

<sn-pop-preview 
  [imgList]="imgList"
  [snWidth]="snWidth"
  [snHeight]="snHeight">
</sn-pop-preview>

<sn-page-preview 
  [imgList]="imgList"
  [snHeight]="'300px'"
  (snPageBtnClick)="onPageBtnClick($event)">
</sn-page-preview>

<sn-file-upload
  [snAccept]="'image/png, image/jpeg'"
  [snUploadUrl]="'https://gateway-dev.smarteventcloud.cn'"
  [(snFileList)]="fileList"
  [snUploadData]="uploadData"
  [snListType]="'picture-card'"
  [snFileNum]=6
  [snMultiple]=true
  (snRemoveCallback)="removeCallback($event)"
  (snUploadCallback)="uploadCallback($event)"
>
  <span>
      <i nz-icon type="plus"></i>
      <div>上传图片</div>
  </span>
</sn-file-upload>