上传

文件选择上传和拖拽上传控件。

如何使用

非内置模块,需要额外在 json-schema 注册 withUploadWidget

注意事项

  • 务必 指定 resReName 来获取正确数据

  • multiple 决定返回数组或者单体数据

  • 若指定 enumasyncData 将被转化成 fileList (nzFileList) 值,且务必初始保证一个 response 属性表示远程数据并 resReName 能正确获取

  • 图像预览:默认使用 nzModal 来显示包含文件对象的 urlthumbUrl

代码演示

基础样例

最简单的用法。

expand code expand code
import { Component, inject } from '@angular/core';

import { DelonFormModule, SFSchema } from '@delon/form';
import type { SFUploadWidgetSchema } from '@delon/form/widgets/upload';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'form-upload-simple',
  template: ` <sf [schema]="schema" (formSubmit)="submit($event)" /> `,
  standalone: true,
  imports: [DelonFormModule]
})
export class FormUploadSimpleComponent {
  private readonly msg = inject(NzMessageService);
  schema: SFSchema = {
    properties: {
      file: {
        type: 'string',
        title: '单个文件',
        enum: [
          {
            uid: -1,
            name: 'xxx.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            response: {
              resource_id: 1
            }
          }
        ],
        ui: {
          widget: 'upload',
          action: '/upload',
          resReName: 'resource_id',
          urlReName: 'url'
        } as SFUploadWidgetSchema
      },
      mulit: {
        type: 'string',
        title: '多个文件',
        ui: {
          widget: 'upload',
          action: '/upload',
          resReName: 'resource_id',
          urlReName: 'url',
          multiple: true
        } as SFUploadWidgetSchema
      },
      // 拖动模式
      drag: {
        type: 'string',
        title: 'Drag',
        ui: {
          widget: 'upload',
          action: '/upload',
          resReName: 'resource_id',
          urlReName: 'url',
          type: 'drag'
        } as SFUploadWidgetSchema
      }
    }
  };

  submit(value: {}): void {
    this.msg.success(JSON.stringify(value));
  }
}

API

schema属性

成员说明类型默认值
[readOnly]禁用状态boolean-

ui属性

成员说明类型默认值
[asyncData]异步数据源() => Observable<SFSchemaEnumType[]>-
[type]上传类型select,dragselect
[text]按钮文本string点击上传
[hint]提醒文本,drag 时有效string支持单个或批量,严禁上传公司数据或其他安全文件
[resReName]重命名返回参数,支持 a.b.c 的嵌套写法,若不指定表示整个返回体string-
[urlReName]重命名预览图像URL返回参数,支持 a.b.c 的嵌套写法,若不指定表示使用文件对象的 urlthumbUrlstring-
[action]必选参数, 上传的地址string, ((file: UploadFile) => string, Observable<string>)-
[accept]接受上传的文件类型, 详见 input accept Attributestring, string[]-
[limit]限制单次最多上传数量,multiple 打开时有效;0 表示不限number0
[filter]自定义过滤器UploadFilter[]-
[fileList]文件列表UploadFile[]-
[fileSize]限制文件大小,单位:KB;0 表示不限number0
[fileType]限制文件类型,例如:image/png,image/jpeg,image/gif,image/bmpstring-
[headers]设置上传的请求头部Object, (file: UploadFile) => {} | Observable<{}>-
[listType]上传列表的内建样式text,picture,picture-cardtext
[showUploadList]是否展示列表, 可设为一个对象,用于单独设定 showPreviewIconshowRemoveIconbooleantrue
[multiple]是否支持多选文件,IE10+ 支持。开启后按住 ctrl 可选择多个文件。booleanfalse
[name]发到后台的文件参数名stringfile
[data]上传所需参数或返回上传参数的方法Object, (file: UploadFile) => {} | Observable<{}>-
[withCredentials]上传请求时是否携带 cookiebooleanfalse
[directory]支持上传文件夹(caniusebooleanfalse
[openFileDialogOnClick]点击打开文件对话框booleantrue
[beforeUpload]上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传(file: UploadFile, fileList: UploadFile[]) => boolean|Observable<boolean>-
[customRequest]通过覆盖默认的上传行为,可以自定义自己的上传实现(item: UploadXHRArgs) => Subscription-
[remove]点击移除文件时的回调,返回值为 false 时不移除(file: UploadFile) => boolean|Observable-
[preview]点击文件链接或预览图标时的回调(file: UploadFile) => void-
[previewFile]自定义文件预览逻辑(file: UploadFile) => Observable<string>-
[download]点击下载文件时的回调,如果没有指定,则默认跳转到文件 url 对应的标签页(file: UploadFile) => void-
[transformFile]在上传之前转换文件。支持返回一个 Observable 对象(file: UploadFile) => UploadTransformFileType-
[change]上传文件改变时的状态(args: UploadChangeParam) => void-
Loading...