当前位置：首页 > news >正文

Vue+Nodejs+Express+Minio 实现本地图片上传

news 2025/6/28 16:08:05

安装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); // 上传到MinIOconsole.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前端代码

效果图如下

在这里插入图片描述

代码

<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>

api.js

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