安装Minio,Minio server和Minio client都要下载可以自定义安装目录

1. 安装完成之后,可以将minio配置成环境变量方便使用
   

2. 配置了环境变量启动命令式 minio server start,默认账号密码minioadmin和minioadmin,点击9000端口的这个链接,即可访问客户端

nodejs连接Minio,简易服务进行图片上传,比较简单,直接上代码

const express = require('express');
const Minio = require('minio');
const bodyParser = require('body-parser'); // 解析 req.body
const multer = require('multer');//formdata数据处理
const cors = require('cors'); //设置允许跨域
const upload = multer();

const minioClient = new Minio.Client({
  endPoint: 'localhost',
  port: 9000,
  useSSL: false,
  accessKey: 'xxx', //这里换成自己的
  secretKey: 'xxx', //这里换成自己的
});

const app = express();
app.use(cors());
app.use(bodyParser.json());

app.post('/upload', upload.single('file'), async (req, res) => {
  try {
    const file = req.file; // 获取上传文件
    const bucketName = 'xxx'; //自己创建的桶名
    const objectName = Date.now() + '_' + file.originalname; // 设置对象名称
    const data = await minioClient.putObject(bucketName, objectName, file.buffer); // 上传到MinIO
    console.log(data);
    res.send({
      code: 200,
      url: `http://localhost:9000/${bucketName}/${objectName}`, // 返回访问URL
    });
  } catch (err) {
    res.status(500).send(err);
  }
});

app.listen(8808, () => {
  console.log('listening on port 8808');
});

Vue前端代码

1. 效果图如下

2. 代码

   <template>
       <div class="minio-container common-container">
           <el-button icon="el-icon-upload2" type="primary" @click="handleUploadFile">上传</el-button>
           <transition name="transition-preview">
               <div class="demo-image__preview" style="margin-top:20px" v-if="imageUrl">
                   <el-image style="width: 100px; height: 100px" :src="imageUrl" :preview-src-list="srcList">
                   </el-image>
               </div>
           </transition>
       </div>
   </template>
   
   <script>
   import { Message } from "element-ui";
   import { isImage } from "@/utils";
   import { uploadImage } from "@/request/api";
   
   export default {
       data() {
           return {
               imageUrl: "",
               srcList: [],
           };
       },
   
       methods: {
           handleUploadFile() {
               const input = document.createElement("input");
               input.setAttribute("type", "file");
               input.setAttribute("multiple", "multiple");
               input.setAttribute("accept", "image/*");
               input.click();
               const _this = this; // 如果不想使用这种语法,onchange的函数换成箭头函数,即可解决this指向问题
               input.onchange = async function (event) {
                   const file = event.target.files[0];
                   if (!isImage(file)) {
                       return Message.error("不是可上传的图片格式");
                   }
                   const formData = new FormData();
                   formData.append("file", file);
                   const data = await uploadImage(formData);
                   if (data?.code && data.code == 200) {
                       _this.imageUrl = data.url;
                       _this.srcList = [].concat(data.url);
                   }
               };
               input.remove();
           },
       },
   };
   </script>
   
   <style lang='scss' scoped>
   .fold-height-enter-active,
   .fold-height-leave-active {
       transition: height 0.5s ease;
       overflow: hidden;
   }
   
   .fold-height-enter,
   .fold-height-leave-to {
       height: 0 !important;
   }
   </style>
   

3. api.js

   import request from './request';
   
   const URLS = {
     uploadImage: '/upload',
   };
   
   export const uploadImage = (data) => request({ method: 'post', url: URLS.uploadImage, data });