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

  1. 安装Minio,Minio serverMinio client都要下载可以自定义安装目录

    1. 安装完成之后,可以将minio配置成环境变量方便使用
      在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

  1. 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');
    });

在这里插入图片描述

  1. Vue前端代码

    1. 效果图如下

    在这里插入图片描述

    1. 代码

      <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>
      
    2. api.js

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/20057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

顺序表、链表刷题指南(力扣OJ)

目录 前言 题目一&#xff1a;删除有序数组中的重复项 思路&#xff1a; 题解&#xff1a; 题目二&#xff1a;合并两个有序数组 思路&#xff1a; 分析&#xff1a; 题解&#xff1a; 题目三&#xff1a;反转链表 思路&#xff1a; 分析&#xff1a; 题解&#xff1a; 题目四&…

springboot自定义错误消息

为了提供自定义错误消息提示&#xff0c;springboot在resources目录下&#xff0c;有一个文件ValidationMessages.properties 用于存储 验证错误的消息提示&#xff1a; 比如&#xff1a; 这样一个ValidationMessage.properties username.notempty用户名不能为空 username.len…

如何压缩高清PDF文件大小?将PDF文件压缩到最小的三个方法

PDF格式是一种非常常用的文档格式&#xff0c;但是有时候我们需要将PDF文件压缩为更小的大小以便于传输和存储。在本文中&#xff0c;我们将介绍三种PDF压缩的方法&#xff0c;包括在线PDF压缩、利用软件PDF压缩以及使用WPS缩小pdf。 首先&#xff0c;在线PDF压缩是最常用的方…

华云安参编的《云原生安全配置基线规范》正式发布

由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;、中国通信标准化协会主办的第十届可信云大会云原生安全分论坛于7月26日在北京国际会议中心成功召开。作为大会上展示的成果之一&#xff0c;由中国信通院联合行业领先企业共同编写的《云原生安全配置基线规…

寒假作业(蓝桥杯2016年省赛C++A组第6题 )

题目&#xff1a; 注&#xff1a;蓝桥杯2016年省赛CA组第6题 请填写表示方案数目的整数。 题解&#xff1a; 由题可知这是一道全排列问题&#xff0c;因此我们可以使用c的next_permutation函数对于1-13的数字进行全排列即可&#xff0c;并每次排列判断是否满足题意。 注意…

无边界野望:高通也有痛点?

外界给予高通的称呼无非是性价屠夫&#xff0c;因为即可“拳打”联发科&#xff0c;又能四度包下上海ChinaJoy展馆做游戏技术支持的王者&#xff0c;对高通来说它的路是无边界的&#xff0c;也是跨界之路上前行的“诗和远方”。 这里&#xff0c;既有生成式AI在终端侧布局、与…

React之组件的生命周期

React之组件的生命周期 一、概述二、整体说明三、挂载阶段四、更新阶段五、卸载阶段 一、概述 生命周期:一个事务从创建到最后消亡经历的整个过程组件的生命周期&#xff1a;组件从被创建到挂载到页面中运行&#xff0c;再到组件不用时卸载的过程意义&#xff1a;理解组件的生…

使用IPSEC VPN 在有防火墙的场景和有NAT转换的场景下实现隧道通信实验

目录 一、在有防火墙的场景 1、为所有设备配置对应ip地址&#xff1a; 2、进入两个防火墙实现公网互通 3、测试公网是否互通 4、进入SW1配置IPSEC VPN 5、进入SW2配置IPSEC VPN 6、配置策略方向ESP的流量 7、尝试使用PC1访问PC2 二、在有NAT地址转换的场景 1、为新增加…

视频号将不支持添加企业微信:私域流量受阻

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 以前大家一直嚷嚷着说微信视频号企业微信私域流量神器&#xff0c;这下好了&#xff0c;从今日起这个功能没了&#xff0c;以后新的视频号不能绑定企业微信了&#xff0c;但老视频号还可以。 昨天…

招投标系统简介 招投标系统源码 java招投标系统 招投标系统功能设计

&#xfeff;功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&…

【数据结构】二叉树、二叉搜索树、平衡二叉树、红黑树、B树、B+树

概述 二叉树&#xff08;Binary Tree&#xff09;&#xff1a;每个节点最多有两个子节点&#xff08;左子节点和右子节点&#xff09;&#xff0c;没有限制节点的顺序。特点是简单直观&#xff0c;易于实现&#xff0c;但查找效率较低。 二叉搜索树&#xff08;Binary Search…

烘焙小程序蛋糕店烘焙店源码点心店小程序源码

本系统开发使用JAVA技术栈开发 使用uniapp技术栈 支持微信小程序 &#xff0c;对接打印机&#xff0c;对接第三方同城跑腿平台 用户端使用&#xff1a;uniapp 管理端使用&#xff1a;vueelementui 后台服务使用&#xff1a;springbootjpa

Java版本工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em

​ 工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

不同语言操作符的优先级

看到标题&#xff0c;可能会心生疑惑: 这么基础且重要的操作&#xff0c;不同语言不应该是一致的吗&#xff1f; 并不一定&#xff0c;比如对于右移运算和加法运算&#xff0c;Go就与其他多数语言表现得不一致&#xff1a; Go: package mainimport "fmt"func main() …

Vault数据备份恢复-MySQL

前言 Vault提供了可靠的功能来保护数据库和其他关键数据。 对于MySQL数据库,Vault提供了一个易于使用的解决方案,可以自动创建和管理定期备份,并支持从备份中快速恢复数据。本文将介绍Vault后端存储MySQL的备份恢复,包括如何设置Vault、如何进行数据备份和还原、如何保护…

iOS——Block two

Block 的实质究竟是什么呢&#xff1f;类型&#xff1f;变量&#xff1f;还是什么黑科技&#xff1f; Blocks 是 带有局部变量的匿名函数 Blocks 由 OC 转 C 源码方法 在项目中添加 blocks.m 文件&#xff0c;并写好 block 的相关代码。打开「终端」&#xff0c;执行 cd XX…

[C++]01.基础,数据类型,运算符

01.基础,数据类型,运算符 一.C基础入门1.HelloWorld2.注释3.变量4.常量5.关键字6.命名规则 二.数据类型1.整形2.sizeof关键字3.浮点型4.字符型5.转义字符6.字符串型7.布尔类型8.数据的输入 三.运算符1.算数运算符2.赋值运算符3.比较运算符4.逻辑运算符 一.C基础入门 1.HelloWo…

webshell详解

Webshell详解 一、 Webshell 介绍二 、 基础常见webshell案例 一、 Webshell 介绍 概念 webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境&#xff0c;也可以将其称做为一种网页后门。黑客在入侵了一个网站后&#xff0c;通常会将asp或php后门文件与…

【普通人维护windows的方法,不中毒,不弹窗,不卡顿】

前言 IT人也是普通人&#xff0c;我就说说普通人维护电脑的方法。 我的电脑配置 给大家看看&#xff0c;配置一般&#xff0c;运行软件和游戏&#xff0c;可以保持基本流程 日常维护措施 我不太喜欢设定一些非主流的配置&#xff0c;下了一个360卫士,360其他的套餐可以不用下…

数据结构——绪论

一、绪论 &#xff08;一&#xff09;基本概念 数据&#xff1a;数据是对客观事物的符号表示&#xff0c;在计算机科学中是指所有能输入到计算机中并被计算机程序处理的符号的总称。 数据元素&#xff1a;数据元素是数据的基本单位&#xff0c;在计算机程序中通常作为一个整…