Skip to content
On this page
useHooks tmui.design

上传文件 useUploadFile

这是一个封装完整的文件上传hooks函数,适合自定义上传组件或者自定义上传界面的伙伴。

方法

事件名参数返回数据描述
useUploadFileUSE_UPLOAD_FILE_CONFIG_TYPE|nullresult直接执行即可

下方解析出来后的方法或者属性都有ts类型提示,我这里不不多解释了。如果想仔细看用处,请直接查看源码,源码已经注释好了。

ts
// result:返回的结构体,可以直接解构使用:
{
	config:Ref<USE_UPLOAD_FILE_CONFIG_TYPE>,//配置表,可以直接修改
	choose,
	files: Ref<FILE_TYPE[]>,//文件列表
	remove,
	addFile,
	start,
	stop,
	clearFile,
	getFile,
	uploading,
	activeIndex,
	isLimitCount,
	addEventListener:(type:'change'|'beforeRemove'|'beforeStart'|'beforeFileStart'|'successAfter'|'success'|'fail'|'complete'|'uploadComplete'|'chooseFileAfter',
	Fun:any)
}

** addEventListener的用法就是为上传添加相关事件。其中的type就是事件名称,如果不懂什么意思请直接查找阅读源码,已经注释好了。**

使用

ts
import { useUploadFile } from '@/tmui/tool/useFun/useUploadFile'
const {config,
        choose,
        files,
        remove,
        addFile,
        start,
        stop,
        clearFile,
        getFile,
		//当前上传的状态,true上传中,false结束
        uploading,
        activeIndex,
		//当前有没有超过上传数量
		isLimitCount,
		addEventListener} = useUploadFile();
// 选择上传文件
choose();
// 文件列表
console.log(files.value)
// 开始上传,如果你在config中配置了自动上传choose后会自动发起上传事件。
start();

类型参考

ts
//文件对象结构
export interface FILE_TYPE {
    url: string,//当前显示的图片地址,这是个本地临时地址。待上传前,成功后会替换服务器地址。
    status?: string,//上传状态文本
    progress?: number,//当前文件上传的进度
    uid?: string | number,//文件唯一标识id
    statusCode?: STATUS_CODE,//文件状态
    response?: any,//上传成功后的回调数据。
    name?: string,//文件名称
    size?: number,//文件大小字节单位
    FILE?: any,//文件对象。
    [key: string]: any
}

//文件上传的状态值
export enum STATUS_CODE {
    //待上传
    upload = 0,
    //上传中
    uploading = 1,
    //上传失败
    fail = 2,
    //上传成功
    success = 3,
    //超过大小限制
    max = 4,
}
//config配置的结构
export interface USE_UPLOAD_FILE_CONFIG_TYPE {
    /**media表示只允许图片或者视频选择,file表示允许任意文件,但只支持h5,微信平台  */
    uploadType:"media"|"file",
    maxCount: number,//一次选择文件最大数量。
    extension: string[],//文件选择的类型。
    type: "all" | "image" | "video" | "file" | undefined,
    /**只对h5 */
    sourceType: Array<'album' | 'camera'>,
    maxSize: number,//每一个文件上传的最大尺寸,默认为10mb
    hostUrl: string,//上传文件的服务器地址
    autoUpload: boolean,
    header: { [key: string]: any },//头部参数。
    formData: { [key: string]: any },//额外的表单数据。
    formName: string,
    code: number,//服务器响应码,如果不为此码,表示上传失败。
    maxDuration:number,//如果选择的类型是视频,可以定制此拍摄的最大时长。仅uploadType为media时有效
    sizeType:Array<'original'|'compressed'>,//仅对 mediaType 为 image 时有效,是否压缩所选文件,仅uploadType为media时有效
    camera:'back'|'front',//仅在 sourceType 为 camera 时生效,使用前置或后置摄像头,仅uploadType为media时有效
    mediaType:Array<'image'|'video'>,//注意当uploadType=media时,如果是微信,抖音,飞书这里可以为当前正常类型值;如果是其它平台:只取数组中第一个值,比如要选择图片设置为["image"],视频:["video"],仅uploadType为media时有效

}

注意事项

属性都最Ref类型,访问时需要带.value,config可以直接修改配置。不建议直接修改files.value,