项目背景: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 = thislet 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.typeconst 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转arrayBufferlet 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转blobtoBlob (base64Data) {let byteString = base64Dataif (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)}// 生成blobconst blob = new Blob([uintArr], {type: mimeString})// 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以 生成一个普通的url,可以直接使用return blob},
