项目背景:vue2，前提是请先安装miniO,若安装引入时报错，那就是版本不对，通常指定版本安装即可。
页面样式：
前端vue页面代码：
//<el-form>表单中:
<el-form-item label="文件" prop="fileIds">
<span v-if="showWait">文件上传中,请耐心等待</span>
<div v-else>
<div v-if="formUpload.urlIllustrate&&formUpload.typeFlag">
<input type="file" id="file" @change="uploadFile()" />
//实际只需要采纳文件上传输入框就行 其余代码是我的上传校验判断
</div>
<div @click="ruleUpInfo" v-else>
<span style="border:1px solid #000000;padding:4px;background-
color:#EFEFEF;">选择文件</span>
</div>
</div>
</el-form-item>代码中引入minio,并声明配置mini连接
import * as Minio from 'minio';
let stream = require('stream')
//连接minio文件服务器
var minioClient = new Minio.Client({
endPoint: 'xxxxxxxxxxxxxx.cn',
accessKey: 'oooooooooooooo1',
secretKey: 'cccccccccccccccccccccccc',
useSSL: false,
bucketName: 'nnnnnnnnnname' // 存储桶名称
});上传事件中：
//上传文件
uploadFile(fileObj,index) {
let vm = this
let file = document.getElementById('file').files[0];
this.showWait=true //这是我自己的判断 可删
console.log('fole',file);
// 获取当前日期并格式化
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
//获取文件类型及大小
const fileName = `${this.formUpload.typeFlag}/${formattedDate}/${file.name}`
//文件名拼接日期和数据类型（此处是为了在minio库中看到日期对应的上传文件，所以拼接，按需使用。注意MiniO库中同名文件会被覆盖，所以建议最好加个日期或者定义数据类型之类的区分开）
const mineType = file.type
const fileSize = file.size
//参数
let metadata = {
"content-type": mineType,
"content-length": fileSize
}
//判断储存桶是否存在
//这里nnnnnname改成配置的储存桶名称
minioClient.bucketExists('nnnnnname', function(err) {
if (err) {
if (err.code == 'NoSuchBucket') return console.log("bucket does not
exist.")
return console.log(err)
}
//存在
console.log('Bucket exists.')
//准备上传
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function (e) {//读取完成触发，无论成功或失败
console.log('读取完成',e);
const dataurl = e.target.result
//base64转blob 这里调了下面toBlob方法，不要困惑vm是什么，我前面声明过vm=this
指向的哈
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));
//上传
//这里nnnnnname改成配置的储存桶名称
minioClient.putObject('nnnnnname', fileName, bufferStream, fileSize,
metadata, function(err, etag) {
console.log('走上传了',etag);
if (err == null) {
//这里nnnnnname改成配置的储存桶名称
minioClient.presignedGetObject('nnnnnname', fileName,
24*60*60, function(err, presignedUrl) {
if (err) return console.log(err)
//输出url 上传到桶成功后会返回个地址
console.log('上传后0',presignedUrl)
if(presignedUrl){
vm.submitUpload(presignedUrl) //这里按需处理，我是拿到地址后，请求
submitUpload方法，将地址传给后端存了的
}
})
}
})
}
}
})
},
//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类型
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,可以直接使用
return blob
},
