Java实现MinIO上传PDF文件并配置浏览器在线打开及vue2上传页面

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-upload
            class="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>