minio上传进度条vue

### 文件上传进度条实现方案 在Spring Boot中使用MinIO实现文件上传的同时展示进度条，主要依赖于前后端的协同工作。前端负责收集用户的文件输入以及向用户反馈当前的上传状态；而后端则需处理实际的文件接收逻辑，并适时地将上传进度返回给前端。 #### 前端部分 对于前端而言，`vue-simple-uploader`是一个不错的选择来构建具有友好UI界面的应用程序[^3]。此库允许开发者轻松集成文件选择器，并且内置了对分片上传的支持特性。为了实现实时更新上传进度，在每次接收到服务器响应后调整进度条的位置： ```javascript import Vue from 'vue'; import uploader from 'vue-simple-uploader'; Vue.use(uploader); new Vue({ el: '#app', methods: { handleProgress(event, file){ console.log('Upload Progress:', event.percent); this.uploadPercentage = Math.round(event.percent); // 更新百分比数值用于视图渲染 } }, }); ``` 上述代码片段展示了如何监听上传过程中的事件变化，并据此改变页面上显示的进度比例。 #### 后端部分 后端方面，基于Spring Boot框架配合MinIO服务端SDK完成文件流式的读取操作。每当从前端接收到一部分数据包时即刻写入目标对象内而不必等到整个文件传输完毕才开始保存至磁盘或云存储空间里。这样不仅降低了单次请求的数据量也使得中途暂停后再继续成为可能[^5]。 下面给出一段简化版的服务端控制器示例代码，它接受来自客户端发送过来的部分文件内容并记录下已接收字节数以便后续查询： ```java @RestController @RequestMapping("/api/files") public class FileController { @PostMapping(value="/upload", consumes="application/octet-stream") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile multipartFile, HttpServletRequest request) throws IOException{ long receivedBytes = 0L; InputStream inputStream = null; try { String originalFilename = multipartFile.getOriginalFilename(); Long fileSize = multipartFile.getSize(); // 获取InputStream实例化MinioClient... while ((receivedBytes += inputStream.read(buffer)) != -1 ) { minioClient.putObject(PutObjectArgs.builder() .bucket(bucketName) .object(objectName) .stream(inputStream, fileSize, PartSize.DEFAULT_MIN_PART_SIZE) .contentType(multipartFile.getContentType()) .build()); // 返回当前接收了多少字节的信息给前端 Map<String,Object> progressInfo=new HashMap<>(); progressInfo.put("total", fileSize); progressInfo.put("loaded", receivedBytes); HttpServletResponse response=(HttpServletResponse)request.getAttribute(HttpAttributes.RESPONSE); ObjectMapper mapper = new ObjectMapper(); PrintWriter out=response.getWriter(); out.print(mapper.writeValueAsString(progressInfo)); out.flush(); } return ResponseEntity.ok().body("success"); } catch (Exception e) { throw new RuntimeException(e.getMessage(),e.getCause()); } finally { if(null!=inputStream){ inputStream.close(); } } } } ``` 需要注意的是这段Java代码仅为示意性质，具体实现细节可能会有所不同取决于项目的实际情况和个人偏好。另外，考虑到网络波动等因素可能导致连接中断的情况发生，建议加入重试机制以增强系统的健壮性[^2]。

### 实现 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]。