Minio 上传文件获取进度 vue3

### 实现 Vue3 中 MinIO 文件上传进度监控 为了实现在 Vue3 项目中向 MinIO 进行文件上传的同时获取并展示上传进度，可以基于 `minio-js` 客户端库以及 XMLHttpRequest 或者 Fetch API 结合流处理来完成这一功能[^2]。 #### 使用 minio-js 库配置 MinIO 客户端连接 首先安装必要的依赖包： ```bash npm install minio axios vue3-progress-bar ``` 接着初始化 MinIO Client 对象以便后续操作存储桶内的资源： ```javascript import {Client} from 'minio'; const client = new Client({ endPoint: 'play.min.io', port: 9000, useSSL: true, accessKey: 'YOUR-ACCESSKEYID', secretKey: 'YOUR-SECRETACCESSKEY' }); ``` #### 创建文件上传方法与进度监听器 定义用于执行实际上传动作的方法，并通过事件处理器捕获传输过程中的变化情况。这里以 Axios 发起请求为例说明如何设置回调函数更新 UI 上的状态指示条。 ```javascript async function uploadFile(file, bucketName){ const config = { onUploadProgress: progressEvent => { let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); console.log(`Uploading ${percentCompleted}%`); // 更新 Vuex store 或本地状态管理机制里的进度数值 this.$store.commit('setProgress', percentCompleted); } }; try{ await client.putObject(bucketName, file.name, file, (err, etag)=>{ if(!err){ console.log("Successfully uploaded",etag); }else{ throw err; } },config); }catch(error){ console.error("Error during upload:",error.message); } } ``` 注意上述代码片段里对 `putObject()` 方法调用时传递了一个额外参数——即包含了自定义钩子的对象 `config` ，它允许开发者拦截每一次的数据块发送行为从而计算出当前已完成的比例[^1]。 #### 构建可视化进度组件 最后一步是在视图层面上构建一个简单的进度条控件用来实时反馈给用户整个流程的发展状况。此部分可借助第三方插件如 `vue3-progress-bar` 或自行编写样式化的 HTML/CSS 元素组合而成。 ```html <template> <div class="upload-section"> <input type="file" @change="handleFileChange"/> <!-- 显示进度 --> <div v-if="isUploading" :style="{width:`${progress}%`}"></div> </div> </template> <script setup lang="ts"> import { ref } from "vue"; let isUploading = ref(false); let progress = ref(0); function handleFileChange(event:Event){ const target = event.target as HTMLInputElement; const files = target.files; if(files && files.length>0){ isUploading.value=true; uploadFile(files[0],"your-bucket-name").then(()=>{ isUploading.value=false; }); } } // 导入前面定义好的 uploadFile 函数... </script> <style scoped> .upload-section div{ /* 样式省略 */ } </style> ``` 这段模板展示了基本的输入框和动态调整宽度属性表示加载程度的小部件；当检测到新的文档被选定时触发相应的逻辑控制序列直至结束为止[^3]。