minio用来上传图片：

您所在的位置：网站首页 › vue上传图片到minio › minio用来上传图片：

minio用来上传图片：

2024-07-05 16:31| 来源: 网络整理| 查看: 265

minio用来上传图片：

需求：公司需要标注一些大量的图片，压缩包大小在5gb，图片数量在百万级别来说，前端这部分与后端配合选用了minio这一技术，官方API文档链接在这里：https://min.io/

这是对象object的名字

上传流程：

用的技术栈是vue，首先要进行minio的安装

npm install --save minio

然后在你使用的页面中要引入minio，此处的endpoint容易出错，如果使用的时候刚开始报错的话要注意是不是这里出现了问题

let Minio = require('minio') let stream = require('stream') //连接minio文件服务器 var minioClient = new Minio.Client({ endPoint: '', //对象存储服务的URL port: ,//端口号 useSSL: false, //true代表使用HTTPS accessKey: '', //登陆minio的账户id secretKey: '', //登陆minio的密码 // partSize: '50M' });

（1）首先通过input按钮拿到你需要上传的文件

上传文件

上传的文件类型是压缩包zip，大小在5gb以内

onFileChange () { const file = this.$refs.file.files[0] const filePath = window.URL.createObjectURL(file) // console.log(file) // 文件的类型与大小应该进行一次判断，如果不满足条件应该弹出信息提示 if (file.type !== "application/x-zip-compressed" && file.size > 5*2^30) { this.$message.error('上传失败，文件格式或者大小不符合要求') return } this.uploadMinIo(file) this.$message({ message: '上传文件成功', type: 'success' }) },

上述只是对上传的压缩包有个判断筛选过程，接下来要做的是将选中的压缩包给上传给minio，uploadMinIo是封装好的上传函数

//上传文件 uploadMinIo (fileObj) { let vm = this // const files = fileObj; if (fileObj) { let file = fileObj //判断是否选择了文件 if (file == undefined) { //未选择 } else { //选择 //获取文件类型及大小 const fileName = file.name // const mineType = file.type const fileSize = file.size const a = '/' //参数 // let metadata = { // "content-type": image/png, // "content-length": fileSize // } //判断储存桶是否存在 minioClient.bucketExists('annotation', function(err) { if (err) { if (err.code == 'NoSuchBucket') return console.log("bucket does not exist.") return console.log(err) } //准备上传 let reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function (e) {//读取完成触发，无论成功或失败 const dataurl = e.target.result //base64转blob const blob = vm.toBlob(dataurl) //blob转arrayBuffer let reader2 = new FileReader() reader2.readAsArrayBuffer(blob) reader2.onload = function(ex) { //定义流 let bufferStream = new stream.PassThrough(); //将buffer写入 bufferStream.end(new Buffer(ex.target.result)); //上传 minioClient.putObject('annotation', `archive${a}${fileName}`, bufferStream, fileSize, function(err, etag) { if (err == null) { minioClient.presignedGetObject('annotation', `archive${a}${fileName}`, 24*60*60, function(err) { if (err) return console.log(err) }) } }) } } }) } } }, //base64转blob toBlob (base64Data) { let byteString = base64Data if (base64Data.split(',')[0].indexOf('base64') >= 0) { byteString = atob(base64Data.split(',')[1]) // base64 解码 } else { byteString = unescape(base64Data.split(',')[1]) } // 获取文件类型 let mimeString = base64Data.split(';')[0].split(":")[1] // mime类型 // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区 // let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组 // let uintArr = new Uint8Array(arrayBuffer) // 创建视图 let uintArr = new Uint8Array(byteString.length) // 创建视图 for (let i = 0; i < byteString.length; i++) { uintArr[i] = byteString.charCodeAt(i) } // 生成blob const blob = new Blob([uintArr], { type: mimeString }) // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上 return blob },

前端上传压缩包，由后端负责解压，上传之后，很快就可以在bucket中找到上传之后的结果。

（2）解压过后，前端还需要将上传过后的图片给拽下来，渲染到页面中，因为我要进行渲染，minio获取存储在minio的图片由两个api，刚开始用的是get object，但是这样生成的链接在浏览器中打不开图片，又重新找到另一个API–presignedGetObject，这个API生成的链接是可以渲染在页面中的。

后端这块在解压的时候会将图片的信息进行记录，需要使用的时候可以通过接口拿到图片的详细信息，然后根据这些信息经图片渲染回来

annotationStart(this.task_id).then((res)=> { this.message = res.data this.work_id = res.data.id let key = res.data.data.Key minioClient.presignedGetObject('annotation', `${key}`, 24*60*60, (err, presignedUrl) => { this.imageUrl= presignedUrl this.publish(this.imageUrl) }) })

annotation是bucket的名字，key是对应object的名字，这个生成的链接文档部分说是有效期是七天。

minio技术我觉得重点是知道bucketname，还有object是什么，对这两点的知识如果很清晰的话，API在使用的时候就游刃有余了。@TOC

【本文地址】

minio用来上传图片：

minio用来上传图片：

今日新闻

推荐新闻