上传 Uploader

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

使用

API

安装使用

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

用法示例

基础用法

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

codesanbox

copy

code

<template>
  <TiUploader url="https://api.bayfiles.com/upload" />
</template>

<script lang="ts" setup>
import { TiUploader } from 'titian-h5-vue';
</script>

自定义参数

自定义header

codesanbox

copy

code

<template>
  <TiUploader url="https://api.bayfiles.com/upload" :image-params="params" />
</template>

<script lang="ts" setup>
import { TiUploader } from 'titian-h5-vue';
const params = {
  name: 'picture',
  header: {
    'content-type': 'multipart/form-data',
  },
};
</script>

自定义上传

仅使用组件样式

codesanbox

copy

code

<template>
  <TiUploader :value="fileList" :immediately="false" :afterChoose="afterChoose" @change="onChange" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiUploader } from 'titian-h5-vue';

const fileList = ref([
  {
    path: 'https://image-c-dev.weimobwmc.com/qa-On6X/8b97cd488593474ba4a8ccaa3c1a493f.png',
    fileType: 'image',
    status: 'done',
  },
]);

async function YOUR_UPLOAD() {
  // TODO
}

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

网格布局

控制每行显示的数量

codesanbox

copy

code

<template>
  <TiUploader url="https://api.bayfiles.com/upload" :cols="3" chooseText="请选择文件" />
</template>

<script lang="ts" setup>
import { TiUploader } from 'titian-h5-vue';
</script>

手动上传

上传

通过设置 `immediately` 为 `false`，并调用 `submit` 方法，可以手动控制上传时机。

codesanbox

copy

code

<template>
  <TiButton @click="doSubmit">上传</TiButton>
  <TiUploader
    ref="uploaderRef"
    url="https://api.bayfiles.com/upload"
    size="small"
    :count="10"
    :immediately="false"
    chooseText="请选择"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiButton, TiUploader } from 'titian-h5-vue';

const uploaderRef = ref();

const doSubmit = (event: any) => {
  if (uploaderRef.value) {
    uploaderRef.value.submit();
  }
  console.log('doSubmit', event);
};
</script>

TiUploader API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
value	unknown	否	-	使用 value，组件为受控模式	-
default-value	UploadFileParams[]	否	[]	使用 defaultValue ，组件为非受控模式
disabled	boolean	否	false	禁用交互能力
immediately	boolean	否	true	是否立刻上传	-
immediately-choose	boolean	否	true	点击后立即选择	-
size	small | large	否	small	组件尺寸	-
cols	number	否	-	多列布局，可代替size	-
choose-text	string	否		选择器文案	-
choose-icon	string	否	plus	选择器 icon	-
source-type	array	否	['album', 'camera']	选择图片的来源	-
camera	back | front	否	back	仅在 sourceType 为 camera 时生效，使用前置或后置摄像头	-
count	number	否	9	选择文件/图片/视频的数量	-
url	string	否	-	上传地址	-
preview	Function	否		自定义预览组件。默认使用内置的预览工具	-
choose	Function	否		选择函数	-
before-choose	Function	否		选择前的处理函数	-
after-choose	Function	否		选择后的处理函数
before-upload	Function	否		- 上传前置方法 可用用于处理上传参数	-
upload	Function	否		自定义上传方法，不传则使用内置的上传方法	-
complete	Function	否		上传完成/删除完成后调用	-
after-upload	Function	否		上传后置方法，后置处理返回结果	-
upload-exercise	'' | loading | progress	否	loading	上传中展示风格	-
image-params	Record<string, any>	否	{}	上传图片参数；当不传自定义 beforeUpload 方法时，可以传该参数作为内部 beforeUpload 的参数	-
video-params	Record<string, any>	否	{}	上传视频参数；当不传自定义 beforeUpload 方法时，可以传该参数作为内部 beforeUpload 的参数	-
file-params	Record<string, any>	否	{}	上传文件参数；当不传自定义 beforeUpload 方法时，可以传该参数作为内部 beforeUpload 的参数	-
image-result-format	(string | number)[]	否	[]	图片参数；当不传自定义 afterUpload 方法时，可以传该参数作为内部 afterUpload 的参数	-
video-result-format	(string | number)[]	否	[]	视频参数；当不传自定义 afterUpload 方法时，可以传该参数作为内部 afterUpload 的参数	-
file-result-format	(string | number)[]	否	[]	文件参数；当不传自定义 afterUpload 方法时，可以传该参数作为内部 afterUpload 的参数	-
accept	string	否	/	http 的 accept 参数，指定文件类型	-
ext-style	string	否	''	容器样式	-

事件 Events

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

外部样式类 External Classes

名称	说明	备注
ext-class	根节点可扩展的类名	-
ext-thum-box-class	缩略图容器类名	--
ext-thum-tip-class	缩略图容器提示类名	--
ext-thum-class	缩略图类名	--
ext-thum-image-class	缩略图-图片类名	--
ext-thum-video-class	缩略图-视频类名	--
ext-thum-other-class	缩略图-其他类名	--
ext-action-class	选择器-类名	--

CSS 变量 CSS Variable

变量	默认值	说明	备注
--uploader-action-bg-color	theme.color.gray.background.40	上传区背景色	-
--uploader-action-text-color	theme.color.gray.texticon.250	上传区文字颜色	-
--uploader-icon-color	theme.color.gray.texticon.400	上传区 icon 颜色	-
--uploader-disabled-color	theme.color.gray.border.100	上传区禁用 icon、(失败)文字颜色	-
--uploader-fail-color	theme.color.gray.texticon.invert	上传文件失败文字颜色	-
--uploader-fail-bg-color	theme.color.gray.mask.800	上传文件失败背景颜色	-
--uploader-loading-color	theme.color.gray.texticon.invert	上传文件 loading 颜色	-
--uploader-loading-bg-color	theme.color.gray.texticon.900	上传文件 loading 背景颜色	-
--uploader-margin	24rpx	容器外边距	-
--uploader-size	120rpx	容器大小(size="small")	-
	216rpx	容器大小(size="large")	-
--uploader-radius	theme.borderRadius.r2	容器圆角(size="small")	-
	theme.borderRadius.r3	容器圆角(size="large")	-
--uploader-action-font-size	theme.fontSize.t2	上传按钮，文字字号(size="small")	-
	theme.fontSize.t4	上传按钮，文字字号(size="large")	-
--uploader-action-line-height	theme.lineHeight.single.t2	上传按钮，文字行高(size="small")	-
	theme.lineHeight.single.t4	上传按钮，文字行高(size="large")	-
--uploader-action-font-weight	theme.fontWeight.regular	上传按钮，文字字重	-
--uploader-icon-font-size	theme.fontSize.t8	上传按钮，图标尺寸(size="small")	-
	theme.fontSize.t12	上传按钮，图标尺寸(size="large")	-

数据结构 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;
}