vue3+vite 阿里云OSS分片上传(可获取上传进度)

Vue3 和 Vite 结合使用时，想要实现阿里云 OSS (Object Storage Service) 的分片上传并获取上传进度，通常会借助第三方库如 `vue-uploader` 或者 `uppy` 等来进行文件管理和处理。以下是基本步骤：

1. **安装依赖**:
- 安装 Vue 项目里的依赖项，比如 `vue`, `vite`, 可能还需要 `axios`（用于与 OSS API 交互）和 `vue-upload-plugin` 或者 `uppy-vue`。

   npm install axios vite @vue/upload-plugin uppy-vue ali-oss

2. **配置阿里云OSS**:
- 注册阿里云账号，创建一个新的存储空间，并获取 Access Key 和 Secret Key。
- 使用这些信息配置 `ali-oss` 库，在项目的配置文件（如 `.env` 或者 `config.js`) 中设置。

3. **使用组件库**:
- 导入分片上传组件，例如 `Uppy` 的 Vue 插件，然后在 Vue 组件中初始化并配置它。

   import Uppy from '@uppy/core'
   import Uploader from 'uppy-vue'
   import AliOss from 'ali-oss'

   export default {
     components: {
       UppyComponent: {
         render(createElement) {
           return createElement(Uploader, {
             component: Uppy,
             options: {
               providers: [
                 new AliOss({
                   accessKeyId: process.env.VUE_APP_OSS_ACCESS_KEY_ID,
                   secretAccessKey: process.env.VUE_APP_OSS_SECRET_ACCESS_KEY,
                   bucket: process.env.VUE_APP_OSS_BUCKET_NAME,
                   endpoint: process.env.VUE_APP_OSS_ENDPOINT,
                 }),
               ],
               // 分片上传相关的配置
               split: true,
               onUploadStart: async (file) => {
                 // 获取上传进度事件
                 file.on('progress', (progress) => {
                   console.log(`Uploading ${file.name}: ${Math.round(progress.percentage * 100)}%`)
                 })
               },
               // ...其他配置
             }
           })
         }
       }
     }
   }

4. **监听上传状态**:
- Uppy 或相关组件会触发不同的事件，你可以监听这些事件来跟踪上传进度、完成、错误等情况。

// 监听上传完成
component.$uppy.on('complete', async (files) => {
  console.log('Upload completed:', files)
})

// 监听上传错误
component.$uppy.on('error', (err, file) => {
  console.error('Error uploading', err, file)
})