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>
