nutui-uniapp/components/uploader/uploader.ts

京东风格的轻量级移动端 Uniapp、Vue3 组件库（支持小程序开发）

import type { ExtractPropTypes, PropType } from 'vue'
import type { Interceptor } from '../_utils'
import {
  commonProps,
  makeArrayProp,
  makeNumericProp,
  makeStringProp,
  nullableBooleanProp,
  truthProp,
} from '../_utils'
import type { AcceptType, FileItem, MediaType, SizeType, SourceType } from './types'
import type { UploadOptions } from './use-uploader'

export const uploaderProps = {
  ...commonProps,
  /**
   * @description 发到后台的文件参数名
   * - 类型为 `string`
   * - 默认值为 `'file'`
   */
  name: makeStringProp('file'),
  /**
   * @description 上传服务器的接口地址
   */
  url: String,
  /**
   * @description 选择文件的来源
   * - 类型为 `Array<SourceType>`
   * - 默认值为 `['album', 'camera']`
   */
  sourceType: makeArrayProp<SourceType>(['album', 'camera']),
  /**
   * @description 选择文件类型
   * - 类型为 `Array<MediaType>`
   * - 默认值为 `['image', 'video', 'mix']`
   */
  mediaType: makeArrayProp<MediaType>(['image', 'video', 'mix']),
  /**
   * @description 超时时间，单位为毫秒
   * - 类型为 `number | string`
   * - 默认值为 `1000 * 30`
   */
  timeout: makeNumericProp(1000 * 30),
  /**
   * @description 默认已经上传的文件列表
   */
  fileList: makeArrayProp<any>([]),
  /**
   * @description 是否上传成功后展示预览图
   * - 类型为 `boolean`
   * - 默认值为 `true`
   */
  isPreview: truthProp,
  /**
   * @description 上传列表的内建样式，支持两种基础样式 `picture`、`list`
   * - 类型为 `string`
   * - 默认值为 `'picture'`
   */
  listType: makeStringProp<'picture' | 'list'>('picture'),
  /**
   * @description 是否展示删除按钮
   */
  isDeletable: truthProp,
  /**
   * @description 上传请求的 http method
   * - 类型为 `string`
   * - 默认值为 `'post'`
   */
  method: makeStringProp('post'),
  capture: Boolean,
  /**
   * @description 可以设定最大上传文件的大小（字节）
   */
  maximize: makeNumericProp(Number.MAX_VALUE),
  /**
   * @description 最多可以选择的文件个数，微信基础库2.25.0前，最多可支持9个文件，2.25.0及以后最多可支持20个文件
   */
  maximum: makeNumericProp(9),
  accept: makeStringProp<AcceptType>('image'),
  /**
   * @description 设置上传的请求头部
   */
  headers: { type: Object, default: {} },
  /**
   * @description 附加上传的信息 formData
   */
  data: { type: Object, default: {} },
  /**
   * @description 接口响应的成功状态（status）值
   */
  xhrState: makeNumericProp(200),
  /**
   * @description 是否支持文件多选
   */
  multiple: truthProp,
  /**
   * @description 是否禁用文件上传
   */
  disabled: nullableBooleanProp,
  /**
   * @description 是否在选取文件后立即进行上传，false 时需要手动执行ref的`submit`方法进行上传
   */
  autoUpload: truthProp,
  /**
   * @description 执行 `uni.uploadFile` 上传时，自定义方法
   */
  beforeUpload: {
    type: Function,
    default: null,
  },
  /**
   * @description 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除
   */
  beforeDelete: {
    type: Function as PropType<Interceptor>,
    default: null,
  },
  /**
   * @description 当accept为video时生效，是否压缩视频，默认为true（默认 true ）
   * - compressed: { type: Boolean, default: true },
   * - 当accept为video时生效，拍摄视频最长拍摄时间，单位秒（默认 60 ）
   */
  maxDuration: makeNumericProp(60),
  /**
   * @description 所选的图片的尺寸, 可选值为original compressed
   */
  sizeType: makeArrayProp<SizeType>(['compressed', 'original']),
  /**
   * 当accept为video时生效，可选值为back或front
   */
  camera: makeStringProp<'back' | 'front' | undefined>('back'),
  /**
   * @description 预览图片的 mode 属性
   */
  mode: makeStringProp<'aspectFit' | 'scaleToFill' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right'>('aspectFit'),
}

export type UploaderProps = ExtractPropTypes<typeof uploaderProps>

export const uploaderEmits = {
  'start': (option: UploadOptions) => option instanceof Object,
  'progress': (val: { event: any, option: UploadOptions, percentage: string | number }) => val instanceof Object,
  'update:fileList': (val: FileItem[]) => val instanceof Object,
  'oversize': (val: any[]) => val instanceof Object,
  'success': (val: any) => val instanceof Object,
  'failure': (err: any) => err instanceof Object,
  'change': (val: { fileList: FileItem[], event?: any }) => val instanceof Object,
  'delete': (val: { file: FileItem, fileList: FileItem[], index: number }) => val instanceof Object,
  'fileItemClick': (val: any) => val instanceof Object,
}

export type UploaderEmits = typeof uploaderEmits