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

vue中使用minio上传文件

创建一个 文件getOssClient

import { getOssSetting } from "@/api/common";
import Vue from "vue";
import { getCookies, getLocal } from "@/utils/auth"; // get token from cookie
export async function getStsToken() {//从后台获取stsTokenif (getCookies("token")) {const res = await getOssSetting();if (res.code == 200) {Vue.prototype.$ossClient = getClient(res.data);}}}
export function getClient(data) {const Minio = require('minio');
let endpointes=data.endpoint.indexOf("//")>0?data.endpoint.substring(data.endpoint.indexOf('//')+2,data.endpoint.length):data.endpoint
let endpoints =endpointes.lastIndexOf(':')>0?endpointes.substring(0,endpointes.lastIndexOf(':')):endpointes
let port =Number(data.endpoint.lastIndexOf(':')>0?data.endpoint.substring(data.endpoint.lastIndexOf(':')+1,data.endpoint.length):80)
let minio={endPoint: endpoints,  //文件服务器地址port:port,//文件服务器端口useSSL: false,accessKey: data.accessKey,// 文件服务器账号secretKey: data.secretKey, // 文件服务器密码 bucket:data.bucketName, sessionToken:data.securityToken,fileKey:data.fileKey
}
Vue.prototype.$minioInfo = minio;
const minioClient = new Minio.Client(minio)return minioClient;
}getStsToken()

上传组件中使用 打开上传就会拿到key
在这里插入图片描述

async handleUploadFile(e) {this.uploadArr.push(e);if (!this.btnLoading) {this.btnLoading = true;this.$emit("uploaded", true);}if (this.isUploading) {this.progressFlag = truethis.loadProgress = 35this.isUploading = false;const upload = (e) => {uploadFile(e.file, e.file.name, this.$ossClient,this.$minioInfo).then((res) => {this.loadProgress = 100this.progressFlag = falsethis.btnLoading = false;let newItem = this.addType({ ...res });this.previewImgList.push(newItem);this.isUploading = true;if (this.previewImgList.length < this.uploadArr.length) {let item = this.uploadArr[this.previewImgList.length];upload(item);} else {this.$emit("uploaded", false);this.btnLoading = false;this.$emit("uploadSuccess", this.previewImgList);}}).catch(() => {this.$emit("uploaded", false);this.btnLoading = false;this.isUploading = true;this.loadProgress = 0this.progressFlag = false});};upload(e);}},
// 上传文件
export function uploadFile(f , fileName, client,minioInfo) {try {let suffix = fileName.substr(fileName.lastIndexOf("."));let num = getNum(6, 10);let storeAs = suffix.substr(1) + "/" + new Date() * 1 + "/" + num + suffix;let reader = new FileReader();reader.readAsArrayBuffer(f);return new Promise((resolve, reject) => {reader.onload = function (e) {let res = e.target.result;//ArrayBufferlet buf = Buffer.from(res);//Buffer const metaData = {'content-type': f.type,'content-length': f.size}return   client.putObject(minioInfo.bucket, storeAs, buf, f.size, metaData,function (err, data) {if (err){myMessage({message: err,type: "error",duration: 5 * 1000,});}else{let obj = {};obj.fileKey = storeAs;obj.originalName = fileNamelet urls=minioInfo.endPoint.indexOf("//")>0?minioInfo.endPoint:('http://'+minioInfo.endPoint)obj.url =  `${urls}:${minioInfo.port}/${minioInfo.bucket}/${storeAs}`;resolve(obj)}});}})} catch (e) {}
}

相关文章:

vue中使用minio上传文件

创建一个 文件getOssClient import { getOssSetting } from "/api/common"; import Vue from "vue"; import { getCookies, getLocal } from "/utils/auth"; // get token from cookie export async function getStsToken() {//从后台获取stsTo…...

MySQL表的增删改查(初阶)

CRUD 即增加(Create)、查询(Retrieve)、更新(Update)、删除(Delete)四个单词的首字母缩写。且增删改查&#xff08;CRUD&#xff0c;create&#xff0c;retrieve&#xff0c;update&#xff0c;delete&#xff09;数据库的核心模块。 1. 新增&#xff08;Create&#xff09; 实…...

搜维尔科技:关于“第九届元宇宙数字人设计大赛”线上+线下巡回宣讲本周高校行程通告!

为了让大家更全面地了解此次大赛&#xff0c;顺利地进行大赛的报名和参赛&#xff0c;组委会遴选了一批优秀讲师代表&#xff0c;组建了宣讲团&#xff0c;以线上线下的方式陆续开展巡回宣讲。宣讲兼顾不同学生群体的需求&#xff0c;结合在数字人设计制作的过程中常见的疑难点…...

Gemini 1.0:Google推出的全新AI模型,改变生成式人工智能领域的游戏规则!

Gemini 1.0&#xff1a;Google推出的全新AI模型&#xff0c;将改变生成式人工智能领域的游戏规则&#xff01; &#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; IT杂谈 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 …...

excel打开并操作CAD(excel-vba实现)_另附:CAD打开excel

excelvba可实现调用cad应用程序&#xff0c;并通过excel内置api弹窗实现打开、另存CAD 文件&#xff08;cad-vba弹窗功能较为麻烦&#xff09;&#xff0c;代码如下&#xff08;在excel_vba环境下操作&#xff09;&#xff1a; Sub excel_vba打开另存并操作CAD文件() Dim cad …...

Prolist组件实现动态竖排展示

实现原理&#xff1a;主要是利用外层div属性display:"flex",overflowX: auto&#xff0c;配合内层prolist样式属性flex:"0 0 auto",overflowX:"auto",width:"350px",height:900&#xff0c;实现动态竖排展示 <div style{{display:…...

基于JAVA的海南旅游景点推荐系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户端2.2 管理员端 三、系统展示四、核心代码4.1 随机景点推荐4.2 景点评价4.3 协同推荐算法4.4 网站登录4.5 查询景点美食 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的海南旅游推荐系统&#xff…...

【Apache-StreamPark】Flink 开发利器 StreamPark 的介绍、安装、使用

【Apache-StreamPark】Flink 开发利器 StreamPark 的介绍、安装、使用 1&#xff09;框架介绍与引入1.1.&#x1f680; 什么是 StreamPark1.2.&#x1f389; Features1.3.&#x1f3f3;‍&#x1f308; 组成部分1.4.引入 StreamPark 2&#xff09;安装部署2.1.环境要求2.2.Hado…...

【STM32】STM32学习笔记-LED闪烁 LED流水灯 蜂鸣器(06-2)

00. 目录 文章目录 00. 目录01. GPIO之LED电路图02. GPIO之LED接线图03. LED闪烁程序示例04. LED闪烁程序下载05. LED流水灯接线图06. LED流水灯程序示例07. 蜂鸣器接线图08. 蜂鸣器程序示例09. 下载10. 附录 01. GPIO之LED电路图 电路图示例1 电路图示例2 02. GPIO之LED接线图…...

docker服务启动报错docker.service holdoff time over, scheduling restart.

docker服务启动报错docker.service holdoff time over, scheduling restart. 卸载docker 卸载安装包 yum remove -y docker docker-client docker-client-latest docker-ce-cli docker-common docker-latest docker-latest-logrotate docker-logrotate docker-selinu…...

cfa一级考生复习经验分享系列(八)

先分析一下CFA Level 1内容&#xff0c;考试总体难度并不大&#xff0c;每门课程都比大学本科开设的对应课程简单&#xff0c;但是因为有十门课综合在一起&#xff0c;知识点相对算比较多&#xff0c;内容较多。但对知识点的掌握要求不高&#xff0c;理解即可。比如财报&#x…...

React中的事件处理

React中的事件处理 亲爱的同学们&#xff0c;今天我们将一起探索React中的一个非常实用的话题&#xff1a;事件处理。当我们谈论事件处理&#xff0c;我们指的是在用户与我们的应用程序交互时发生的各种情况&#xff0c;比如点击一个按钮或是提交一个表单。这些动作是我们如何让…...

德人合科技 | 公司电脑文件加密系统

公司电脑文件加密系统是一种可以对电脑文件进行加密的保护机制。它使用驱动层透明加密技术&#xff0c;能够在用户无感知的情况下对文件进行加密&#xff0c;从源头上保障数据安全和使用安全。 PC端访问地址&#xff1a; www.drhchina.com 此类系统主要有以下几个特点和功能&a…...

FinalShell的下载、安装及基本使用

一&#xff1a;引言 FinalShell 是一体化的的服务器,网络管理软件,不仅是 ssh 客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求. 主要特性&#xff1a; 1.多平台支持 Windows,macOS,Linux 2.多标签,批量服务器管理. 3.支持登录 ssh 和 Windows 远程桌面. 4.漂亮的…...

华为实训课笔记 2023

华为实训 12/1312/1412/1812/19 12/13 ping 基于ICMP协议&#xff0c;用来进行可达性测试 ping 目的IP地址/设备域名&#xff08;主机名&#xff09; 如果能收到 reply 回复&#xff0c;则表示双方可以正常通信。一次正常的数据通信必须是有去有回。 <Huawei>用户视图&a…...

图灵日记之Leetcode链表中间结点牛客链表中倒数第k个结点Leetcode合并两个有序链表leetcode反转链表

题目 链表的中间结点原题入口题目内容题目解析思路一代码实现一思路二代码实现二 链表中倒数第k个结点题目链接题目内容思路代码实现 合并两个有序链表原题入口题目内容思路代码实现 反转链表题目传送入口题目内容思路一代码复现一思路二代码实现二 链表的中间结点 原题入口 …...

条款5:了解c++默默编写并调用了哪些函数

如果你不自己声明&#xff0c;编译器会替你声明&#xff08;编译器版本的&#xff09;拷贝构造函数、拷贝赋值运算符和析构函数。此外&#xff0c;如果你没有声明任何构造函数&#xff0c;编译器会为你声明一个默认构造函数。 class Empty{};本质上和写成下面这样是一样的: c…...

Apache RocketMQ 5.0 腾讯云落地实践

Apache RocketMQ 发展历程回顾 RocketMQ 最早诞生于淘宝的在线电商交易场景&#xff0c;经过了历年双十一大促流量洪峰的打磨&#xff0c;2016年捐献给 Apache 社区&#xff0c;成为 Apache 社区的顶级项目&#xff0c;并在国内外电商&#xff0c;金融&#xff0c;互联网等各行…...

FIFO的Verilog设计(三)——最小深度计算

文章目录 前言一、FIFO的最小深度写速度快于读速度写速度等于或慢于读速度 二、 举例说明1. FIFO写时钟为100MHz&#xff0c;读时钟为80Mhz情况一&#xff1a;一共需要传输2000个数据&#xff0c;求FIFO的最小深度情况二&#xff1a;100个时钟写入80个数据&#xff0c;1个时钟读…...

JavaWeb笔记之JavaWeb JDBC

//Author 流云 //Version 1.0 一. 引言 1.1 如何操作数据库 使用客户端工具访问数据库&#xff0c;需要手工建立连接&#xff0c;输入用户名和密码登录&#xff0c;编写 SQL 语句&#xff0c;点击执行&#xff0c;查看操作结果&#xff08;结果集或受影响行数&#xff09;。…...

Typora与AI结合:使用万象熔炉·丹青幻境为Markdown文档自动配图

Typora与AI结合&#xff1a;使用万象熔炉丹青幻境为Markdown文档自动配图 不知道你有没有过这样的体验&#xff1a;在Typora里写完一篇技术博客或项目文档&#xff0c;内容详实&#xff0c;逻辑清晰&#xff0c;但通篇下来全是文字&#xff0c;总觉得少了点什么。想配几张图吧…...

OpenRouter最新免费额度调整:如何用微信支付宝充值解锁1000次/天API调用

OpenRouter API调用新规解析&#xff1a;微信支付宝充值实战指南 最近OpenRouter平台对免费API调用额度进行了重要调整&#xff0c;这一变化直接影响着国内开发者和AI爱好者的日常使用体验。作为聚合了300多个主流AI模型的统一接口平台&#xff0c;OpenRouter一直以友好的免费政…...

Linux配置静态ip地址和Oracle VM VirtualBox导入/导出虚拟机Centos7

导入虚拟机选择管理 - 导入虚拟电脑找到自己的虚拟机位置修改内存大小&#xff0c;默认虚拟机电脑位置&#xff0c;MAC地址等导入后点击设置如下图&#xff1a;修改网络-网 -- 卡1&#xff0c;其他基本不需要修改桥接网络选好网卡接入网线&#xff1b;设置好网络以后使用命令重…...

如何通过InstantClick事件回调实现精准的性能监控:开发者必备指南

如何通过InstantClick事件回调实现精准的性能监控&#xff1a;开发者必备指南 【免费下载链接】instantclick InstantClick makes following links in your website instant. 项目地址: https://gitcode.com/gh_mirrors/in/instantclick InstantClick是一款能让网站链接…...

影墨·今颜模型API接口开发与调用全指南

影墨今颜模型API接口开发与调用全指南 你是不是已经成功部署了影墨今颜模型&#xff0c;看着它能在本地生成惊艳的图片&#xff0c;心里正盘算着怎么把它变成一个能对外服务的“产品”&#xff1f;比如&#xff0c;让公司的设计团队直接调用&#xff0c;或者集成到自己的应用里…...

5分钟成为效率大师!NoteGen快捷键可视化配置终极指南

5分钟成为效率大师&#xff01;NoteGen快捷键可视化配置终极指南 【免费下载链接】note-gen 一款专注于记录和写作的跨端 AI 笔记应用。 项目地址: https://gitcode.com/GitHub_Trending/no/note-gen NoteGen是一款专注于记录和写作的跨端AI笔记应用&#xff0c;通过快捷…...

无人值守智能图书借阅系统 Java 后端开发实战

在无人值守智能图书借阅系统的Java后端开发实战中&#xff0c;需围绕系统架构设计、核心功能实现、关键技术选型及部署优化等核心环节展开&#xff0c;以下为具体开发方案&#xff1a;一、系统架构设计分层架构体系&#xff1a;采用经典的四层架构设计&#xff0c;包括表现层、…...

3分钟快速上手AdGuard浏览器扩展:开源广告拦截工具全平台安装指南

3分钟快速上手AdGuard浏览器扩展&#xff1a;开源广告拦截工具全平台安装指南 【免费下载链接】AdguardBrowserExtension AdGuard browser extension 项目地址: https://gitcode.com/gh_mirrors/ad/AdguardBrowserExtension AdGuard浏览器扩展是一款开源、免费的广告拦截…...

DanKoe 视频笔记:每日60分钟改变生活:引言与概述

在本教程中&#xff0c;我们将学习如何通过每天投入60分钟来系统地改变生活。我们将探讨常规的重要性&#xff0c;并介绍三个核心习惯&#xff0c;帮助你重新掌控精力、提升财务状况、改善健康以及获得内心的清晰。 每日60分钟改变生活&#xff1a;2&#xff1a;常规的必要性 …...

Java应用Istio mTLS启用后gRPC调用持续超时?紧急解锁x509证书链校验、SNI配置与Java SSLContext动态刷新机制

第一章&#xff1a;Java应用Istio mTLS启用后gRPC调用持续超时&#xff1f;紧急解锁x509证书链校验、SNI配置与Java SSLContext动态刷新机制当Istio启用严格mTLS&#xff08;STRICT模式&#xff09;后&#xff0c;Java客户端通过gRPC调用服务端频繁出现DEADLINE_EXCEEDED超时&a…...