霸州做网站1766534168h5小程序开发

win下载启动minio结合vue2实现文件上传浏览

一.下载启动minio

1. 下载minio

2.在D盘创建文件夹

1.首先创建minio文件夹再minio中依次创建bin/data/logs,如下图
2.把下载的minio.exe放到minio->bin文件中

3.在bin文件夹中输入cmd打开命令框输入命令minio.exe server D:\minio\data启动minio,如下图则启动成功

4.访问minio服务器: 访问本地minio地址
5.创建bucket桶,相当于文件夹,用来存放文件,不同版本不同页面,本文是点击右下角加号并选择框中的create bucket,输入桶名test回车,创建成功


minio处理部分完成

二.需要启动file服务器,语言可以根据需求确定,本文是java语言

如上图: 1.需要添加Minio配置

# Minio配置
minio:url: http://127.0.0.1:9000# 账号accessKey: minioadmin# 密码secretKey: minioadmin# MinIO桶名字bucketName: test

2.启动file服务

三.vue2页面实现上传文件

即可访问

<template><div><el-table :data="tableData" style="width: 100%" border><el-table-column prop="name" label="姓名" min-width="80" align="center"></el-table-column><el-table-column prop="age" label="年龄" min-width="80" align="center"></el-table-column><el-table-column prop="sex" label="性别" min-width="80" align="center"></el-table-column><el-table-column label="头像" min-width="180" align="center"><template #default="scope"><el-uploadclass="upload-demo":action="upload.url":headers="upload.headers":on-preview="() => handlePreview(scope.$index)":on-remove="(file, fileList) => handleRemove(scope.$index, file, fileList)":before-remove="(file, fileList) => beforeRemove(scope.$index, file, fileList)"multiple:limit="3":on-exceed="() => handleExceed(scope.$index)":on-success="(response, file, fileList) =>handleSuccess(scope.$index, response, file, fileList)":file-list="scope.row.fileList || []"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></template></el-table-column></el-table><div class="operation-buttons"><el-button type="primary" @click="printAllFiles"> 确定 </el-button><el-button @click="cancelDelivery">取消</el-button></div></div>
</template><script>
import { getToken } from "@/utils/auth";export default {data() {return {upload: {// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/file/upload",},tableData: [{id: 1,name: "张三",age: 18,sex: "男",fileList: [],fileListUrl: [],},{ id: 2, name: "李四", age: 19, sex: "女" },{id: 2,name: "王五",age: 19,sex: "女",fileList: [],},{ id: 3, name: "小六", age: 20, sex: "男" },],};},methods: {handlePreview(index) {console.log(`预览文件，行索引：${index}`);},handleRemove(index, file, fileList) {console.log(`移除文件，行索引：${index}, 文件：${file.name}`);this.tableData[index].fileList = fileList;},handleExceed(index, files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},beforeRemove(index, file, fileList) {return this.$confirm(`确定移除 ${file.name}？`);},handleSuccess(index, response, file, fileList) {// 确保上传成功的文件信息被正确添加到 fileList 中console.log(`文件上传成功，行索引：${index}, 响应数据：`, response);let fileNameUrlList = fileList.map((file) => ({name: file.response.data.name,path: file.response.data.url,}));this.tableData[index].fileList = fileList;this.tableData[index].fileListUrl = fileNameUrlList;},printAllFiles() {// 打印整个表格的所有文件数据console.log("整个表格的文件数据：",this.tableData.map((row) => row.fileListUrl));},cancelDelivery() {// 取消this.$message.info("已取消");},},
};
</script>
<style scoped>
.operation-buttons {text-align: center;margin: 20px 0;
}
</style>