@mijadesign/mjui-react-taro

import Taro from '@tarojs/taro'; import React from 'react'; import { BasicComponent } from '../../utils/typings'; import { FileItem } from './file-item'; import { MediaType, SizeType, SourceType, StatusMessage } from './type'; import { UploadOptions } from './upload'; export interface UploaderProps extends BasicComponent { /** * 上传服务器的接口地址 * @default - */ url: string /** * 文件上传数量限制 * @default 1 */ maxCount: number /** 上传一共最大数量 */ uploadMaxCount?: number; /** * [是否压缩所选文件]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html") * @default ['original','compressed'] */ sizeType: (keyof SizeType)[] /** * [选择文件的来源]("https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html") * @default ['album','camera'] */ sourceType: (keyof SourceType)[] mediaType: (keyof MediaType)[]; camera: string; /** * 可以设定最大上传文件的大小（字节） * @default Number.MAX_VALUE */ maxFileSize: number /** * 默认已经上传的文件列表 * @default [] */ defaultValue?: FileItem[] /** * 已经上传的文件列表 * @default [] */ value?: FileItem[] /** * 上传列表的内建样式，支持两种基本样式 picture、list * @default picture */ previewType: 'picture' | 'list' /** * 图片填充模式 * @default cover */ fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' /** * 上传区域icon * @default <Addcard /> */ uploadIcon?: React.ReactNode /** * 上传区域图片下方文字 * @default "" */ uploadLabel?: React.ReactNode /** * input 标签 name 的名称，发到后台的文件参数名 * @default file */ name: string accept: string; /** * 是否禁用文件上传 * @default false */ disabled: boolean /** * 是否在选取文件后立即进行上传，false 时需要手动执行 ref submit 方法进行上传 * @default true */ autoUpload: boolean /** * 是否支持文件多选 * @default false */ multiple: boolean /** * 上传一行展示 * @default 3 */ span: number /** * 超时时间，单位为毫秒 * @default 1000 * 30 */ timeout: number /** * 附加上传的信息 formData * @default {} */ data: any /** * 上传请求的 http method * @default post */ method: string /** * 接口响应的成功状态（status）值 * @default 200 */ xhrState: number | string /** * 设置上传的请求头部 * @default {} */ headers: any /** * 是否上传成功后展示预览图 * @default true */ preview: boolean /** * 是否展示删除按钮 * @default true */ deletable: boolean className: string; /** * 当上传非图片('image')格式的默认图片地址 * @default - */ previewUrl?: string maxDuration: number; /** * 图片展示模式 * @default aspectFill */ previewMode: string style: React.CSSProperties; /** * 是否展示描述文案 * @default true */ tips?: boolean; /** 是否展示图片预览 */ imagePreview?: boolean; /** * 文件上传开始 * @default - */ onStart?: (option: UploadOptions) => void /** * 文件删除之前的状态 * @default - */ onDelete?: (file: FileItem, files: FileItem[]) => void /** * 上传成功 * @default - */ onSuccess?: (param: { responseText: XMLHttpRequest['responseText']; option: UploadOptions; files: FileItem[]; }) => void /** * 文件上传的进度 * @default - */ onProgress?: (param: { e: ProgressEvent<XMLHttpRequestEventTarget>; option: UploadOptions; percentage: number | string; }) => void /** * 上传失败 * @default - */ onFailure?: (param: { responseText: XMLHttpRequest['responseText']; option: UploadOptions; files: FileItem[]; }) => void onUpdate?: (files: FileItem[]) => void; /** * 文件大小超过限制时触发 * @default - */ onOversize?: (files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any) => void /** * 上传文件改变时的状态 * @default - */ onChange?: (files: FileItem[]) => void /** * 执行 XHR 上传时，自定义方式 * @default - */ beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void beforeUpload?: (options: any) => boolean; /** * 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除 * @default - */ beforeDelete?: (file: FileItem, files: FileItem[]) => boolean /** * 文件上传成功后点击触发 * @default - */ onFileItemClick?: (file: FileItem, index: number) => void /** 点击上传 */ onUploadClick?: () => void; uploaderMessage?: StatusMessage; } export declare const Uploader: React.ForwardRefExoticComponent<Partial<UploaderProps> & { children?: React.ReactNode | undefined; } & React.RefAttributes<unknown>>;