前端使用minio传输文件

minio官方文档
minio-js可以支持ts。

安装完可能会出现

Can‘t import the named export ‘xxx‘ from non EcmaScript module (only default export is available)

可以尝试降低minio的版本

npm install minio@7.0.18 --save

代码:

初始化
const Minio = require('minio')const minioClient = new Minio.Client({endPoint: '192.l68.0.1', //minio服务器ip,不能加http://port: 9000,accessKey: 'xxxx', //usernamesecretKey: 'xxxx', //passworduseSSL: false  //https访问需要设置为true
})
上传文件
 
const stream = require('stream')/**** @export 上传文件(stream流方法)* @param {*} backetName String 存储桶名字* @param {*} fileObj Object 文件对象* @param {*} callback function 回调函数*/
export function uploadFile (backetName, fileObj, callback) {console.log(backetName, fileObj)if (fileObj) {const file = fileObjif (file === undefined) {// 未选择} else {const date = new Date()const year = new Date().getFullYear()const month =date.getMonth() + 1 < 10? '0' + (date.getMonth() + 1): date.getMonth() + 1const day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()const fileName = date.getTime() + file.nameconst fileDate = '' + year + month + dayconst mineType = file.typeconst fileSize = file.sizeconsole.log('fileName', fileName)// 参数const metadata = {'content-type': mineType,'content-length': fileSize}// 判断储存桶是否存在minioClient.bucketExists(backetName, function (err) {console.log('判断储存桶是否存在')if (err) {if (err.code === 'NoSuchBucket') {return console.log('bucket does not exist.')}console.log('1233221')return console.log(err)}// 准备上传const reader = new FileReader()reader.readAsDataURL(file)reader.onloadend = function (e) {const dataurl = e.target.resultconst blob = toBlob(dataurl)const reader2 = new FileReader()reader2.readAsArrayBuffer(blob)reader2.onload = function (ex) {const bufferStream = new stream.PassThrough()bufferStream.end(Buffer.from(ex.target.result))minioClient.putObject(backetName,`${fileDate}/${fileName}`,bufferStream,fileSize,metadata,(err) => {if (err == null) {minioClient.presignedPutObject(backetName,`${fileDate}/${fileName}`,24 * 60 * 60,function (err1, presignedUrl) {console.log(err1)if (err1) returnif (presignedUrl) {const arr = presignedUrl.split('?')if (arr.length === 2) {callback(arr[0])}}})}})}}})}}
}/**** @export base64转blob* @param {*} base64Data Object base64数据* @return {*} blob*/
export function toBlob (base64Data) {let byteString = base64Dataif (base64Data.split(',')[0].indexOf('base64') >= 0) {byteString = window.atob(base64Data.split(',')[1]) // base64 解码} else {byteString = unescape(base64Data.split(',')[1])}// 获取文件类型const mimeString = base64Data.split(';')[0].split(':')[1] // mime类型const uintArr = new Uint8Array(byteString.length) // 创建视图for (let i = 0; i < byteString.length; i++) {uintArr[i] = byteString.charCodeAt(i)}const blob = new Blob([uintArr], {type: mimeString})return blob
}// 先判断桶是否存在,如果可确保捅已经存在,则直接调用uploadFile方法
export function checkedAndUpload (bucketName, info, callback) {minioClient.bucketExists(bucketName, err => {if (err) {minioClient.makeBucket(bucketName, 'us-east-1', err1 => {if (err1) {console.error(`${info.file.name}文件上传失败`)return}uploadFile(bucketName, info, callback)})} else {uploadFile(bucketName, info, callback)}})
}// 先判断桶是否存在
export function connectionStatus (bucketName, callback) {minioClient.bucketExists(bucketName, err => {console.Log(err)callback(err)})
}
上传文件简单版:
const bucketName = 'picturebook-version'; // 替换为你的存储桶名称
const objectName = file.file.name; // 使用文件名作为对象名称//创建 FileReader 对象
const reader = new FileReader();// 当读取完成时触发的回调函数
reader.onload = (event) => {// 从事件对象中获取文件内容const fileContent = event.target.result;// 转换 ArrayBuffer 为 Buffer 类型数据const buffer = Buffer.from(fileContent);// 使用 putObject 方法上传文件内容this.minioClient.putObject(bucketName, objectName, buffer, buffer.length, (err, etag) => {if (err) {console.error('上传文件失败:', err);} else {this.fileList.push(this.newFile);this.fileName = objectName;console.log('文件上传成功,ETag:', etag);}});
};// 开始读取文件
reader.readAsArrayBuffer(file.file);
下载文件
 
export function downloadFile (bucketName, fileName, callback) {minioClient.getObject(bucketName, fileName, (err, dataStream) => {callback(err, dataStream)})
}
使用
<div @click="selectFile" style="cursor: pointer; width: 80px; text-align: right"class="ant-upload-text" > 上传 </div>
<input type="file id="uploadInput" ref="uploadInput" v-show="false" @change="changeInput()"/>
 
import { uploadFile } from '@/utils/minio'selectFile() {const inputDOM = this.$refs.uploadInputinputDOM.click()
},
changeInput() {const file = this.$refs.uploadInput.filesif (file.length) {this.sourceFile = {name: file[0].name,size: file[0].size,type: file[0].type,}uploadFile('carbon', file[0], (e) => {this.$refs.uploadInput.value = ''this.sourceFile = {...this.sourceFile,url: e,}})}
},

拓展

优点:

1.直接访问对象存储:前端直接与 MinIO 通信,而不需要通过后端服务器作为中介。这样可以降低后端服务器的负担,减少网络传输时间,提高文件传输效率。

2.降低后端开发成本:前端直接使用 MinIO SDK 进行文件上传和下载,减少了与后端开发相关的工作量。这样可以加快开发速度,并降低了整体的开发成本。

3.分布式存储支持:MinIO 支持分布式存储,可以在多个节点之间存储数据,实现高可用性和容错性。前端直接与 MinIO 通信,可以利用 MinIO 的分布式特性,将文件分散存储在不同的节点上,提高文件的可靠性和可用性。

4.快速上传和下载:MinIO 针对文件上传和下载进行了优化,提供了快速的传输速度和低延迟的访问体验。前端直接与 MinIO 通信,可以获得更快的上传和下载速度,提高用户体验。

5.可控性和安全性:前端直接使用 MinIO SDK 进行文件上传和下载,可以根据需要设置访问权限、加密方式等安全措施,保护文件的安全性和完整性。同时,前端可以完全掌控文件的访问和管理,保留对文件的完全控制权。

6.跨平台兼容性:MinIO 提供了丰富的客户端 SDK,包括 JavaScript SDK,在各种前端平台(Web、移动端、桌面端)上都可以方便地集成和使用。这样可以实现跨平台的文件上传和下载,满足不同平台的需求。

缺点:

1.只支持Webpack工程化构建的项目,因为webpack是基于nodeJs的,可以使用require, fs等函数
2.不支持Vite工程化构建形式,Vite是EsModule纯浏览器模块的形式,没有nodeJs里的函数,只能使用import,但部分第三方库并不支持,会报奇怪的错误
3.前端直传Minio是无法获取上传进度的,自然也就无法显示进度条,从而无法拥有良好的人机交互感,并且需要等待Minio反馈后才能判断是否上传成功
4.端口,登录账号,登录密码都写在前端,会暴露关键信息,易造成不必要的信息泄露,并且不易维护
5.由前端写Minio接口不利于之后的扩展,每开一个项目,都需要copy代码,无形中增加了维护的困难性

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

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

相关文章

Java 10 新特性

Java 10 新特性 Java10它号称有109项新特性&#xff0c;包含12个JEP。 需要注意的是&#xff0c;本次Java10并不是Oracle的官方LTS版本&#xff0c;所以咱们可以先了解新特性。然后坐等java11的发布再考虑在生产中使用吧。 特性列表 局部变量的类型推断 var关键字 GC改进和…

【python】基于pyttsx3库的字符串转音频文件

一、源码 import pyttsx3 engine pyttsx3.init() engine.setProperty(volume, 0.8) engine.setProperty(rate, 150) engine.save_to_file("Hello, World!", "output.mp3") engine.runAndWait()二、介绍 使用pyttsx3库&#xff0c;设置声音与速率&#x…

聊一聊一些关于npm、pnpm、yarn的事

前言 整理了最近的闲聊&#xff0c;话题是前端各个包管理器&#xff0c;如果分享的不对或者有异议的地方&#xff0c;麻烦请及时告诉我~ 耐心看完&#xff0c;也许你会有所收获~ 概述 本文阅读时间&#xff1a;10-15分钟左右&#xff1b; 难度&#xff1a;初级&#xff0c…

【回溯】Leetcode 51. N 皇后【困难】

N 皇后 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。…

C# Web应用调用EXE文件的一些实践

目录 需求 范例运行环境 可执行文件的设计 调用可执行文件方法 RunExecuteFile RunShellExecuteFile 方法的区别 WEB调用举例 小结 需求 最近同事使用Python开发了一款智能文字转语音的程序&#xff0c;经讨论部署在WINDOWS环境服务器下&#xff0c;因此需要生成目标…

Pytest实践:Python测试技术基础知识!

一、简介 在软件开发领域&#xff0c;确保代码的正确性和稳健性至关重要。这就是软件测试发挥作用的地方。Python 是一种通用且广泛使用的编程语言&#xff0c;提供了大量的工具和库来帮助测试过程。 其中&#xff0c;Pytest就是一个很好用的测试框架&#xff0c;可以在 Pyth…

transformer上手(3) —— 开箱即用的 pipelines

1 开箱即用的 pipelines Transformers 库将目前的 NLP 任务归纳为几下几类&#xff1a; 文本分类&#xff1a;例如情感分析、句子对关系判断等&#xff1b;对文本中的词语进行分类&#xff1a;例如词性标注 (POS)、命名实体识别 (NER) 等&#xff1b;文本生成&#xff1a;例如…

2024年MathorCup数学建模A题移动通信网络中PCI规划问题解题文档与程序

2024年第十四届MathorCup高校数学建模挑战赛 A题 移动通信网络中PCI规划问题 原题再现&#xff1a; 物理小区识别码(PCI)规划是移动通信网络中下行链路层上&#xff0c;对各覆盖小区编号进行合理配置&#xff0c;以避免 PCI 冲突、PCI 混淆以及 PCI 模3 千扰等现象。PCI 规划…

milvus各组件的结构体分析

milvus各组件的结构体分析 各组件启动&#xff0c;需要构建各组件的结构体&#xff0c;一共8个。 runComponent(ctx, localMsg, wg, components.NewRootCoord, metrics.RegisterRootCoord) runComponent(ctx, localMsg, wg, components.NewProxy, metrics.RegisterProxy) run…

lv_micropython for ESP32-C3

一、开发平台说明 硬件&#xff1a;立创实战派ESP32-C3开发板。处理器ESP32-C3&#xff08;内置400KB SRAM&#xff09;&#xff0c;无内置FLASH&#xff0c;2.0寸液晶&#xff08;液晶驱动IC:ST7789&#xff0c;触屏驱动IC:FT6336&#xff09;&#xff0c;下载口UART0。 ESP…

计算机网络的起源与发展历程

文章目录 前言时代背景ARPANET 的诞生TCP/IP 协议簇与 Internet 的诞生HTTP 协议与 Web 世界结语 前言 在当今数字化时代&#xff0c;计算机网络已经成为我们生活中不可或缺的一部分。无论是在家庭、学校、还是工作场所&#xff0c;我们都能感受到网络的巨大影响。随着互联网的…

c++ 中文转拼音的封装, char 类型 不支持 中文 已解决

在日常业务中&#xff0c;需要进行中文转拼音的检索。已便实现对应的 模糊搜索。 使用方法 std::string res "我是中国人";char* result new char[res.length() 1];for (int i 0; i < res.length(); i){result[i] res[i];}result[res.length()] \0;std::str…

【C++第三阶段】vector容器

以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 构造函数赋值操作容量和大小插入和删除数据存取互换容器预留空间 构造函数 vector函数是常用数据结构&#xff0c;见于刷题网站。 它是单端数组&#xff0c;与普通数组区别在于可以…

【Linux】基础IO----理解缓冲区

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;理解缓冲区 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1a;Linux初阶 > 望…

Aritest+python+Jenkins解放双手iOS/Android自动化

ARITest、Python 和 Jenkins 可以结合在一起创建一个自动化测试解决方案&#xff0c;实现持续集成和持续测试的目标。以下是三者如何协同工作的基本概念&#xff1a; 1. **ARITest**&#xff1a; ARITest 是一款功能全面的自动化测试工具&#xff0c;提供 UI 自动化、接口自…

php中session相关知识(目前了解部分)

#记录学习知识 一.ini_set() 在PHP中&#xff0c;ini_set() 函数用于在脚本运行时设置指定的配置选项的值。这些配置选项可以是PHP的核心设置&#xff0c;例如文件上传的最大大小、脚本的最大执行时间、错误报告级别等。使用 ini_set() 可以临时改变PHP.ini文件中的设置&am…

独立服务器,数据安全保障:WorkPlus即时通讯为企业信息安全把关

随着手机普及率的不断增加&#xff0c;即时通讯已经成为了企业内部沟通的重要方式。WorkPlus作为一家领先的企业级即时通讯服务商&#xff0c;提供了全方位的即时通讯解决方案&#xff0c;助力企业实现沟通无障碍、协作高效率的目标。 WorkPlus提供了多样化的即时通讯功能&…

轻松解锁销售利润!使用淘宝商品关键词搜索API接口

随着电商行业的快速发展&#xff0c;如何提高销售利润成为了卖家们的关注焦点。淘宝商品关键词搜索API接口提供了一种高效的方式来帮助卖家们找到最适合的商品关键词&#xff0c;提高商品曝光率和销售量。联讯数据将全面介绍淘宝商品关键词搜索API接口的用途、优势以及如何使用…

蓝桥杯模拟赛题——魔法失灵了——toRefs()

目标 找到 index.html 中 TODO 部分&#xff0c;正确修复代码使 data 对象恢复响应式特性&#xff0c;即点击页面上的 - 与 按钮可以改变 value 的值。正确实现后效果如下&#xff1a; 题解 value是reactive 利用toRefs; toRefs() 函数可以将 reactive() 创建出来的响应式对象…

数据结构之单链表的相关知识点及应用

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构 目录 链表的概念及结构 链表与顺序表的区别与优劣势 链表的分类 单链表的实现 单链表中增加节点 单链表中尾插数据 打印单链…