跳到主要内容

上传 Uploader

用于将本地图片上传到服务器,可以展示上传进度、结果预览。

安装使用

import { TiUploader } from '@titian-design/mobile-react'

用法示例

基础用法

选择完文件后,立即执行上传操作。

const App: React.FC = () => {
return (
<>
<TiUploader
url="https://api.bayfiles.com/upload"
size="small"
chooseText="请选择文件"
/>
</>
)
}

自定义参数

自定义header

const App: React.FC = () => {
const params = {
name: 'picture',
header: {
'content-type': 'multipart/form-data'
}
}
const afterUpload = (res) => {
// 这里的res是你自定义的上传接口的返回值
const data = JSON.parse(res.data);
if (data.errcode !== '0') {
return {
status: 'fail'
};
}
return {
path: data.data.url,
status: 'done'
};
}
const change = (file, fileList) => {
// 上传完成/删除完成后调用
console.log(file, fileList);
}
return (
<>
<TiUploader
url="https://api.bayfiles.com/upload"
image-params={ params }
afterUpload={ afterUpload }
onChange="change"
/>
</>
)
}

手动上传

通过设置 immediatelyfalse,并调用 submit() 方法,可以手动控制上传时机。

const App: React.FC = () => {

const beforeUpload = (event: any) => {
console.log("beforeUpload", event);
};

const doSubmit = (event: any) => {
if (uploaderRef.current) {
uploaderRef.current.submit();
}
console.log("doSubmit", event);
};

return (
<>
<TiUploader
ref={uploaderRef}
url="https://api.bayfiles.com/upload"
size="small"
count={10}
beforeUpload={beforeUpload}
immediately={false}
chooseText="请选择"
/>
</>
)
}

自定义上传, 仅使用组件样式

const App: React.FC = () => {
const [fileList, setFileList] = useState([
{
path: 'https://xxxxx.png',
fileType: 'image',
status: 'done',
},
]);
const afterChoose = (selectedList, existsList) => {
// 上传之前你可以根据需求,比如size,来过滤selectedList
YOUR_UPLOAD().then(() => {
// 在你的上传回调里设置fileList,主要设置路径path,和状态status => 成功: done,失败:fail,上传中:'upload'
setFileList([
...existsList,
...selectedList.map(el => ({
...el,
path: 'https://xxxxx.png',
status: 'done', // 上传失败的话 这里设置 fail
})),
]);
});
// 这里return出去的是走后续上传的文件
return selectedList.map(el => ({ ...el, status: 'upload' }));
};
const onChange = e => {
setFileList(e.detail.fileList);
};

return (
<TiUploader value={fileList} immediately={false} afterChoose={afterChoose} onChange={onChange}></TiUploader>
)
}

TiUploader API

属性 Properties

名称类型是否必填默认值说明备注
valueunknown-使用 value,组件为受控模式-
defaultValueUploadFileParams[][]使用 defaultValue ,组件为非受控模式
disabledbooleanfalse禁用交互能力
immediatelybooleantrue是否立刻上传-
immediatelyChoosebooleantrue点击后立即选择-
sizesmall | largesmall组件尺寸-
chooseTextstring选择器文案-
chooseIconstringplus选择器 icon-
sourceTypearray['album', 'camera']选择图片的来源-
cameraback | frontback仅在 sourceType 为 camera 时生效,使用前置或后置摄像头-
countnumber9选择文件/图片/视频的数量-
urlstring-上传地址-
previewFunction自定义预览组件。默认使用内置的预览工具-
chooseFunction选择函数-
beforeChooseFunction选择前的处理函数-
afterChooseFunction选择后的处理函数-
beforeUploadFunction- 上传前置方法 可用用于处理上传参数-
uploadFunction自定义上传方法,不传则使用内置的上传方法-
completeFunction上传完成/删除完成后调用-
afterUploadFunction上传后置方法,后置处理返回结果-
uploadExercise'' | loading | progressloading上传中展示风格-
imageParamsRecord<string, any>{}上传图片参数;当不传自定义 beforeUpload 方法时,可以传该参数作为内部 beforeUpload 的参数-
videoParamsRecord<string, any>{}上传视频参数;当不传自定义 beforeUpload 方法时,可以传该参数作为内部 beforeUpload 的参数-
fileParamsRecord<string, any>{}上传文件参数;当不传自定义 beforeUpload 方法时,可以传该参数作为内部 beforeUpload 的参数-
imageResultFormat(string | number)[][]图片参数;当不传自定义 afterUpload 方法时,可以传该参数作为内部 afterUpload 的参数-
videoResultFormat(string | number)[][]视频参数;当不传自定义 afterUpload 方法时,可以传该参数作为内部 afterUpload 的参数-
fileResultFormat(string | number)[][]文件参数;当不传自定义 afterUpload 方法时,可以传该参数作为内部 afterUpload 的参数-
acceptstring/http 的 accept 参数,指定文件类型-
extStylestring''容器样式-

事件 Events

名称参数列表描述备注
onChange(e: CustomEvent<{ file: UploadFile; fileList: UploadFile[]; uploading: boolean }>) => void上传处理
onError(e: CustomEvent<{ status: string; message: string; }>) => void错误事件
onChoose(e: CustomEvent<any>) => void选择事件

外部样式类 External Classes

名称说明备注
extClass根节点可扩展的类名-
extThumBoxClass缩略图容器类名--
extThumTipClass缩略图容器提示类名--
extThumClass缩略图类名--
extThumImageClass缩略图-图片类名--
extThumVideoClass缩略图-视频类名--
extThumOtherClass缩略图-其他类名--
extActionClass选择器-类名--

CSS 变量 CSS Variable

变量默认值说明备注
--uploader-name-colorvar(--neutral-color-4, #c4c4c4)上传文件展示区文字颜色-
--uploader-name-font-size24px上传文件展示区文字大小-
--uploader-action-bg-colorvar(--neutral-color-7, #f5f5f5)上传区背景色-
--uploader-action-text-colorvar(--neutral-color-4, #c4c4c4)上传区文字颜色-
--uploader-icon-colorvar(--neutral-color-3, #9e9e9e)上传区 icon 颜色-
--uploader-disabled-color@neutral-color-5上传区禁用 icon、(失败)文字颜色-
--uploader-fail-colorvar(--neutral-color-9, #ffffff)上传文件失败文字颜色-
--uploader-fail-bg-colorvar(--neutral-color-1, #212121)上传文件失败背景颜色-
--uploader-loading-colorvar(--neutral-color-9, #ffffff)上传文件 loading 颜色-
--uploader-loading-bg-colorvar(--neutral-color-1, #212121)上传文件 loading 背景颜色-
--uploader-small-size120px上传文件小尺寸容器大小-
--uploader-small-margin24px上传文件小尺寸容器外边距-
--uploader-small-radiuscalc(var(--base-radius-size, 0px) + 8px)上传文件小尺寸容器圆角-
--uploader-large-size216px上传文件大尺寸容器大小-
--uploader-large-margin24px上传文件大尺寸容器外边距-
--uploader-large-radiuscalc(var(--base-radius-size, 0px) + 12px)上传文件大尺寸容器圆角-

数据结构 Data Structure

文件 UploadFile

interface UploadFile extends UploadFileExternal {
key: string;
}

interface UploadFileExternal {
path: string;
poster?: string;
size: number;
name: string;
duration?: number;
fileType: UploadType;
status: UploadStatus;
}