LunarXYZuseUpload
提供文件上传功能和上传进度等相关数据。
Usage Tips
从 0.21.0 开始，本 Hook 新增一个入参配置，这是因为 ali-oss 这个包不支持 Tree Shaking ，如果由本包自带安装，会影响没有使用上传功能的项目进行代码优化。
因此把该 JS-SDK 的安装交给用户决定，如果需要用到上传功能，需要先安装阿里云 OSS JS-SDK 。
bash
# 必须安装 OSS JS-SDK 主包
yarn add ali-oss
# 根据自己的需要决定是否安装配套的 TypeScript 类型包
yarn add -D @types/ali-oss
然后在用到本 Hook 的文件里导入 OSS 实例，作为选项传递进去。
ts
// 需要先导入该实例
import OSS from 'ali-oss'
import { useUpload } from '@lunarxyz/core'
// 传递给 Hook
const { progress, upload } = useUpload({ OSS })
- Type Declarations:
ts
interface UploadConfig {
/**
* 阿里云对象存储实例
* @example 传入 `import OSS from 'ali-oss'` 的这个 `OSS`
*/
OSS: any
}
progress
上传进度（必须配合 upload 方法一起用）。
TIP
由于上传图片使用 OSS.put ，上传视频使用 OSS.multipartUpload ，目前仅 multipartUpload 支持进度条，也就是只有上传视频才会有上传进度返回。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
/**
* 本身是一个 Vue Ref 变量
*/
import('vue').Ref<number>
- Example:
ts
import { ref, watch } from 'vue'
import OSS from 'ali-oss'
import { useUpload } from '@lunarxyz/core'
const { progress, upload } = useUpload({ OSS })
// 可以监听进度条的变化
watch(progress, (val) => {
console.log(`当前上传进度：${val}%`)
})
/**
* 处理文件选择
*/
async function handleUpload(e: Event) {
// 详见 `upload` 的演示代码，注意 `type` 为 `1` 也就是视频上传时才会有进度返回
// ...
}
upload
上传到阿里云 OSS 。
TIP
考虑到大部分活动页面的上传需求，所以仅允许图片类和视频类文件上传。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
/**
* 上传到 OSS
*/
declare function upload(options: UploadOptions): Promise<UploadResult>
/**
* 上传选项
*/
export interface UploadOptions {
/**
* 上传类型，0-图片，1-视频，2-头像
*/
type: 0 | 1 | 2
/**
* 从 input 框拿到的完整 file 信息
*/
file: File
}
/**
* 上传结果的类型
*/
export interface UploadResult {
name: string
url: string
width?: Number
height?: Number
size?: number
duration?: number
}
- Example:
vue
<template>
<!-- 文件上传 -->
<div class="upload">
<input ref="inputElement" type="file" @change="handleUpload" />
</div>
<!-- 文件上传 -->
<!-- 上传后的图片 URL 预览 -->
<div class="preview">
<img :src="imgUrl" />
</div>
<!-- 上传后的图片 URL 预览 -->
</template>
<script setup lang="ts">
import { ref } from 'vue'
import OSS from 'ali-oss'
import { useUpload } from '@lunarxyz/core'
const { upload } = useUpload({ OSS })
const inputElement = ref<HTMLInputElement>()
const imgUrl = ref<string>('')
/**
* 处理文件选择
*/
async function handleUpload(e: Event) {
const { files } = e.target as HTMLInputElement
if (!files) return
// 拿到文件信息丢进去上传就可以了
const file = files[0]
const { url } = await upload({
type: 0,
file,
})
imgUrl.value = url
// 避免选择同一个文件无法触发 change
if (!inputElement.value) return
inputElement.value.value = ''
}
</script>