文件选择上传

@erp/biz 提供的文件选择和上传功能，支持多种文件类型和上传配置。

核心功能

• openSelectFile - 打开文件选择器并上传
• uploadBase64 - 上传 Base64 格式图片
• base64ToFile - Base64 转 File 对象
• 支持图片、文档、音视频等多种文件类型
• 支持文件大小限制、多选、自动上传等配置

引入方式

import { openSelectFile, uploadBase64 } from '@erp/biz'
import type { SelectFileProps, FileItem } from '@erp/biz'

openSelectFile

打开文件选择器并上传文件。

基础用法

import { openSelectFile } from '@erp/biz'

// 选择单个文件
const file = await openSelectFile({
  accept: 'image',
  maxSize: 5
})
console.log(file.url) // 上传后的文件URL

// 选择多个文件
const files = await openSelectFile({
  accept: 'image',
  multiple: true,
  maxSize: 10
})

参数说明

interface SelectFileProps {
  /** 上传字段名，默认 'files' */
  name?: string
  
  /** 上传接口地址，默认 '/api/system/upload' */
  action?: string
  
  /** 
   * 接受的文件类型
   * 可选值: 'word' | 'excel' | 'ppt' | 'pdf' | 'image' | 'audio' | 'video'
   * 也可以是 MIME 类型字符串
   */
  accept?: string | string[]
  
  /** 文件大小限制（MB），默认 5MB */
  maxSize?: number
  
  /** 是否支持多选 */
  multiple?: boolean
  
  /** 是否选择文件夹 */
  directory?: boolean
  
  /** 是否自动上传，默认 true */
  autoUpload?: boolean
  
  /** 文件状态变化回调 */
  change?: (file: FileItem) => void
  
  /** 选择文件后的处理函数 */
  afterSelect?: (files: File[]) => File[]
  
  /** 上传前的校验函数 */
  beforeUpload?: (file: FileItem) => boolean | Promise<boolean>
  
  /** 响应数据格式化 */
  formatResponse?: <T>(res: T) => T
  
  /** 响应中URL的路径，默认 'data.path' */
  responseUrlKey?: string
  
  /** 附加的请求数据 */
  data?: Record<string, string | Blob> | ((file: FileItem) => Record<string, string | Blob>)
}

返回值

interface FileItem {
  uid: string           // 文件唯一标识
  file?: File           // 原始文件对象
  url?: string          // 文件URL（上传成功后）
  name?: string         // 文件名
  status?: 'init' | 'uploading' | 'done' | 'error'
  size?: number         // 文件大小（字节）
  percent?: number      // 上传进度 0-1
  response?: any        // 服务器响应
}

使用示例

上传图片

const file = await openSelectFile({
  accept: 'image',
  maxSize: 2,
  beforeUpload: (file) => {
    if (file.size > 2 * 1024 * 1024) {
      Message.error('图片不能超过2MB')
      return false
    }
    return true
  }
})

if (file.status === 'done') {
  console.log('上传成功:', file.url)
}

上传多个文件

const files = await openSelectFile({
  accept: ['image', 'pdf'],
  multiple: true,
  maxSize: 10,
  change: (file) => {
    console.log(`${file.name} 上传进度: ${file.percent * 100}%`)
  }
})

const urls = files.map(f => f.url)

自定义上传参数

const file = await openSelectFile({
  action: '/api/custom/upload',
  name: 'file',
  data: {
    type: 'avatar',
    userId: '123'
  },
  responseUrlKey: 'result.fileUrl'
})

仅选择不上传

const file = await openSelectFile({
  accept: 'excel',
  autoUpload: false
})

// 手动处理文件
const formData = new FormData()
formData.append('file', file.file)

---

uploadBase64

上传 Base64 格式的图片。

基础用法

import { uploadBase64 } from '@erp/biz'

// 上传 base64 图片
uploadBase64(base64String, (url) => {
  console.log('上传成功:', url)
})

// 上传 File 对象
uploadBase64(file, (url) => {
  console.log('上传成功:', url)
}, {
  action: '/api/upload',
  responseUrlKey: 'data.url'
})

参数说明

参数	类型	说明
file	string | File	Base64 字符串或 File 对象
callback	(url: string) => void	上传成功回调
props	SelectFileProps	上传配置（可选）

返回值

返回 FileItem 对象，可用于跟踪上传状态。

const fileItem = uploadBase64(base64, (url) => {
  console.log(url)
}, {
  change: (file) => {
    if (file.status === 'uploading') {
      console.log('上传中:', file.percent * 100 + '%')
    }
  }
})

---

base64ToFile

将 Base64 字符串转换为 File 对象。

import { base64ToFile } from '@erp/biz'

const file = base64ToFile(
  'data:image/png;base64,iVBORw0KGgo...',
  'image/png',      // MIME 类型（可选）
  'screenshot.png'  // 文件名（可选）
)

---

文件类型映射

类型	支持的扩展名	默认大小限制
image	jpg, jpeg, png, gif, webp, svg, bmp	5MB
word	doc, docx	10MB
excel	xls, xlsx	10MB
ppt	ppt, pptx	20MB
pdf	pdf	10MB
audio	mp3, wav, ogg, flac	20MB
video	mp4, webm, avi, mov	100MB