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

Vue3 和 Vite 结合使用时，想要实现阿里云 OSS (Object Storage Service) 的分片上传并获取上传进度，通常会借助第三方库如 `vue-uploader` 或者 `uppy` 等来进行文件管理和处理。以下是基本步骤： 1. **安装依赖**: - 安装 Vue 项目里的依赖项，比如 `vue`, `vite`, 可能还需要 `axios`（用于与 OSS API 交互）和 `vue-upload-plugin` 或者 `uppy-vue`。 ```bash 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 组件中初始化并配置它。 ```javascript 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 或相关组件会触发不同的事件，你可以监听这些事件来跟踪上传进度、完成、错误等情况。 ```javascript // 监听上传完成 component.$uppy.on('complete', async (files) => { console.log('Upload completed:', files) }) // 监听上传错误 component.$uppy.on('error', (err, file) => { console.error('Error uploading', err, file) }) ```