readme.md · 数字建造中心前端开发小组/suit-model-chunk-uploader

# 模型切片上传下载工具使用指南

## 安装
```bash
npm install @suit/model-chunk-uploader
```

## 基本用法
```js
import { fileUploader, setFileUploadConfig } from '@suit/model-chunk-uploader'

// 1. 设置上传配置
setFileUploadConfig({
  globalToken: 'your-token', // 设置token
  globalUploadDirId: 'dir-id', // 上传目录ID 
  globalUploadAppId: 'app-id', // 应用ID
 //  supportedFileTypes: []  // 支持的文件类型，默认为  ['rvt', 'fbx', 'dwg']
})

// 2. 上传文件
fileUploader.addToUpload(
  file, // File对象
  options, // 可选,axios配置项
  progressCallback, // 可选,进度回调 
  successCallback,// 可选,成功回调
  warningCallback // 警告的回调，处理文件类型检测不通过时的处理
)
```

## 完整示例
```vue
<template>
  <input type="file" @change="handleFileChange" accept=".rvt,.fbx,.dwg">
</template>

export default {
  name: 'FileUpload',
  
  created() {
    setFileUploadConfig({
      globalToken: 'xxx',
      globalUploadDirId: 'xxx', 
      globalUploadAppId: 'xxx'
    })
  },
  
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0]
      
      fileUploader.addToUpload(
        file,
        {}, // axios配置
        (progress) => {
          console.log('上传进度:', progress)
        },
        (result) => {
          console.log('上传成功:', result)
        }
      )
    }
  }
}
</script>
```

### 暂停/恢复上传示例
```js
// 上传文件并保存uploadItem引用
let currentUploadItem = null

fileUploader.addToUpload(file, {}, (progress) => {
  console.log('进度:', progress)
}, (result) => {
  currentUploadItem = result
})

// 暂停上传
function pauseUpload() {
  if(currentUploadItem) {
    fileUploader.pauseUpload(currentUploadItem)
  }
}

// 恢复上传
function resumeUpload() {
  if(currentUploadItem) {
    fileUploader.resumeUpload(currentUploadItem)
  }
}
```

### 下载文件示例
```js
fileUploader.downloadFileByGuid(
  'file-guid',
  (progress) => {
    console.log('下载进度:', progress)
  },
  (error) => {
    console.error('下载失败:', error)
  }
)
```

### 查询转换状态示例
```js
// 单个文件转换状态
fileUploader.requestTransStatus('file-guid')

// 批量查询转换状态
fileUploader.checkTransformStatus().then(result => {
  console.log('转换状态:', result)
})
```

## API参考

### setFileUploadConfig(config)
设置上传配置

参数:
```ts
interface Config {
  globalToken: string      // 认证token
  globalUploadDirId: string // 上传目录ID
  globalUploadAppId: string // 应用ID
  supportedFileTypes: []  // 支持的文件类型，默认为  ['rvt', 'fbx', 'dwg']
}
```

### addToUpload(file, options?, progressCallback?, successCallback?)
上传文件

参数:
```ts
file: File                     // 文件对象
options?: AxiosRequestConfig   // axios配置项
progressCallback?: (progress: number) => void  // 进度回调
successCallback?: (result: any) => void       // 成功回调
warningCallback?:(result: any) => void  
```

### pauseUpload(uploadItem)
暂停上传

### resumeUpload(uploadItem) 
恢复上传

### downloadFileByGuid(guid, progressCallback?, failedCallback?)
下载文件

参数:
```ts
guid: string                   // 文件唯一标识
progressCallback?: (progress: number) => void
failedCallback?: (error: {code: number, errorMsg: string}) => void
```

## 支持的文件类型
```js
const supportedFileTypes = ['rvt', 'fbx', 'dwg']
```

## 上传状态说明
```ts
enum UploadStatus {
  WAITING,  // 等待上传
  PENDING,  // 上传中
  RESOLVED, // 上传成功
  REJECTED, // 上传失败
  PAUSED    // 已暂停
}
```

## 注意事项
```js
/*
1. 使用前必须先调用 setFileUploadConfig 设置配置
2. 大文件会自动分片上传,默认分片大小5MB
3. 支持断点续传
4. 最大同时上传3个文件
5. 每个文件最多同时上传3个分片
*/
```

数字建造中心前端开发小组/suit-model-chunk-uploader

简介

发行版

贡献者

近期动态

数字建造中心前端开发小组/suit-model-chunk-uploader .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

数字建造中心前端开发小组/suit-model-chunk-uploader