From 774458ad8baaa6be506f5e68dfce09981c575703 Mon Sep 17 00:00:00 2001 From: innocces <18435105624@163.com> Date: Fri, 13 Aug 2021 17:22:44 +0800 Subject: [PATCH] feat(usefile): add useFile hooks --- .licrc | 19 ++++++ packages/app/src/app.config.ts | 1 + packages/app/src/constant/index.ts | 4 ++ .../app/src/pages/useFile/index.config.ts | 3 + packages/app/src/pages/useFile/index.tsx | 62 +++++++++++++++++ packages/hooks/src/index.ts | 2 + packages/hooks/src/useFile/index.md | 40 +++++++++++ packages/hooks/src/useFile/index.ts | 68 +++++++++++++++++++ packages/hooks/src/useImage/index.ts | 1 - 9 files changed, 199 insertions(+), 1 deletion(-) create mode 100644 .licrc create mode 100644 packages/app/src/pages/useFile/index.config.ts create mode 100644 packages/app/src/pages/useFile/index.tsx create mode 100644 packages/hooks/src/useFile/index.md create mode 100644 packages/hooks/src/useFile/index.ts diff --git a/.licrc b/.licrc new file mode 100644 index 000000000..9b8fc6f35 --- /dev/null +++ b/.licrc @@ -0,0 +1,19 @@ +[licenses] +# This indicates which are the only licenses that Licensebat will accept. +# The rest will be flagged as not allowed. +accepted = ["MIT", "MSC", "BSD", "Apache"] +# This will indicate which licenses are not accepted. +# The rest will be accepted, except for the unknown licenses or dependencies without licenses. +# unaccepted = ["LGPL"] +# Note that only one of the previous options can be enabled at once. +# If both of them are informed, only accepted will be considered. + +[dependencies] +# This will allow users to flag some dependencies so that Licensebat will not check for their license. +ignored=["@taro/tarojs", "react", "react-dom"] + +[behavior] +# False by default, if true, it will only run the checks when one of the dependency files or the .licrc file has been modified. +run_only_on_dependency_modification = true +# False by default, if true, it will never block the build. +do_not_block_pr = false \ No newline at end of file diff --git a/packages/app/src/app.config.ts b/packages/app/src/app.config.ts index 3a03cf3c8..b526429cf 100644 --- a/packages/app/src/app.config.ts +++ b/packages/app/src/app.config.ts @@ -55,6 +55,7 @@ export default { 'pages/useRequest/loadMoreRef/index', 'pages/useNetworkType/index', 'pages/useOnline/index', + 'pages/useFile/index', // device 'pages/useBattery/index', 'pages/useVibrate/index', diff --git a/packages/app/src/constant/index.ts b/packages/app/src/constant/index.ts index 584c55939..6cd3b4e8f 100644 --- a/packages/app/src/constant/index.ts +++ b/packages/app/src/constant/index.ts @@ -213,6 +213,10 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = { id: 'useOnline', name: 'useOnline 网络状态', }, + { + id: 'useFile', + name: 'useFile 上传下载', + }, ], }; diff --git a/packages/app/src/pages/useFile/index.config.ts b/packages/app/src/pages/useFile/index.config.ts new file mode 100644 index 000000000..218665f12 --- /dev/null +++ b/packages/app/src/pages/useFile/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useFile', +}; diff --git a/packages/app/src/pages/useFile/index.tsx b/packages/app/src/pages/useFile/index.tsx new file mode 100644 index 000000000..a4afa452d --- /dev/null +++ b/packages/app/src/pages/useFile/index.tsx @@ -0,0 +1,62 @@ +import React, { useCallback } from 'react'; +import { AtButton } from 'taro-ui'; + +import DocPage from '@components/DocPage'; + +import { useFile, useImage, useModal } from 'taro-hooks'; + +export default () => { + const { download, upload } = useFile(); + const [, { choose, preview }] = useImage({}); + const [showModal] = useModal({ mask: true, title: '文件结果' }); + + const handleUpload = useCallback(async () => { + const fileInfo = await choose(); + if (fileInfo?.tempFilePaths?.length) { + const uploadFilePath = fileInfo.tempFilePaths[0]; + const uploadResult = await upload({ + url: 'https://run.mocky.io/v3/35b34abe-3f7e-4cde-91a8-da02f699bdc0', + filePath: uploadFilePath, + name: 'chooseImage:file', + header: {}, + }); + const modalContent = + uploadResult?.statusCode === 200 ? uploadResult?.data : '上传失败'; + showModal({ content: modalContent }); + } else { + showModal({ + content: '取消选择', + }); + } + }, [choose, upload, showModal]); + + const handleDownload = useCallback(async () => { + try { + const result = await download({ + url: 'https://pixabay.com/get/gca7a9aedd24075bee51ccdc9e510d6d78d66b2b607c643e63260d944732a75301e6ce92f56e371d0ea11c55613742929_640.jpg', + }); + if (result.statusCode === 200 && result?.tempFilePath) { + preview({ + urls: [result?.tempFilePath], + }); + } else { + throw new Error(); + } + } catch (e) { + showModal({ + content: 'downloadFile: fail', + }); + } + }, [download, showModal, preview]); + + return ( + <> + + 选择图片上传 + + 下载图片 + + + + ); +}; diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 4ffc2d832..0f6080596 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -29,6 +29,7 @@ import useUpdateManager from './useUpdateManager'; import useNetworkType from './useNetworkType'; import useOnline from './useOnline'; import useRequest from './useRequest'; +import useFile from './useFile'; // device import useBattery from './useBattery'; @@ -62,6 +63,7 @@ export { useNetworkType, useOnline, useRequest, + useFile, useToast, useModal, useLoading, diff --git a/packages/hooks/src/useFile/index.md b/packages/hooks/src/useFile/index.md new file mode 100644 index 000000000..19b1bbb81 --- /dev/null +++ b/packages/hooks/src/useFile/index.md @@ -0,0 +1,40 @@ +--- +title: useFile +nav: + title: Hooks + path: /hooks + order: 2 +group: + title: 网络 + path: /network +--- + +# useFile + +上传、下载文件 + +## 何时使用 + +当需要上传下载文件时 + +## API + +```jsx | pure +const visible: boolean = useVisible(); +``` + +## 返回值说明 + +| 返回值 | 说明 | 类型 | +| ------- | -------------------- | --------- | +| visible | 当前应用是否处于后台 | `boolean` | + +## 代码演示 + + + +## Hook 支持度 + +| 微信小程序 | H5 | ReactNative | +| :--------: | :-: | :---------: | +| ✔️ | ✔️ | | diff --git a/packages/hooks/src/useFile/index.ts b/packages/hooks/src/useFile/index.ts new file mode 100644 index 000000000..9cb369d47 --- /dev/null +++ b/packages/hooks/src/useFile/index.ts @@ -0,0 +1,68 @@ +import { uploadFile, downloadFile, General } from '@tarojs/taro'; +import { useCallback } from 'react'; + +export interface IUploadOption { + url: string; + filePath: string; + name: string; + header?: Record; + formData?: Record; + timeout?: number; + fileName?: string; +} + +export interface IDownloadOption { + url: string; + filePath?: string; + header?: Record; +} + +export type IUploadFileAction = ( + option: IUploadOption, +) => Promise; + +export type IDownloadFileAction = ( + option: IDownloadOption, +) => Promise; + +export interface IAction { + upload: IUploadFileAction; + download: IDownloadFileAction; +} + +function useFile(): IAction { + const upload = useCallback((option) => { + return new Promise((resolve, reject) => { + try { + uploadFile({ + ...(option || {}), + success: resolve, + fail: reject, + }).catch(reject); + } catch (e) { + reject({ errMsg: 'uploadFile:fail' }); + } + }); + }, []); + + const download = useCallback((option) => { + return new Promise((resolve, reject) => { + try { + downloadFile({ + ...(option || {}), + success: resolve, + fail: reject, + }); + } catch (e) { + reject({ errMsg: 'downloadFile:fail' }); + } + }); + }, []); + + return { + upload, + download, + }; +} + +export default useFile; diff --git a/packages/hooks/src/useImage/index.ts b/packages/hooks/src/useImage/index.ts index 7a172788a..b1f682332 100644 --- a/packages/hooks/src/useImage/index.ts +++ b/packages/hooks/src/useImage/index.ts @@ -81,7 +81,6 @@ function useImage(options: ChooseImageOption): [IFileInfo, IAction] { chooseImage({ ...finalOptions, success: (res) => { - console.log(res); const { errMsg, ...fileInfo } = res; setFileInfo(fileInfo); resolve(res);