如何在vue中使用minio上传图片
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片。首先定义一个minio对象:minioObj = {endPoint: "服务ip",port:端口,useSSL: false,accessKey: "账号",secretKey: "密码"};然后初始化minio,没有引入minio的记得先引入var minioClient = new Minio.Cl
·
最近项目中使用了minio作为静态资源管理服务,所以简单写一下如何通过minio来上传图片。
首先定义一个minio对象:
minioObj = {
endPoint: "服务ip",
port:端口,
useSSL: false,
accessKey: "账号",
secretKey: "密码"
};
然后初始化minio,没有引入minio的记得先引入
var minioClient = new Minio.Client({
...minioObj
});
接着就是定义上传方法,这里直接贴el-upload组件使用http-request自定义上传行为的代码:
import stream from "stream";
//上传文件行为
uploadFunc(params) {
let that = this;
const file = params.file;
const form = new FormData();
// 文件对象
form.append("file", file);
// 本例子主要要在请求时添加特定属性,所以要用自己方法覆盖默认的action
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = e => {
const dataurl = e.target.result;
//base64转blob
const blob = 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));
var fileName = setFileName(file);
var metaData = {
"Content-Type": file.type,
"X-Amz-Meta-Testing": 1234,
example: 5678
};
minioClient.putObject(
"bamboocloud-ga-image",
fileName,
bufferStream,
null,
metaData,
(err, etag, id) => {
if (err) {
return console.log(err);
}
//上传成功回调
that.$emit("input", that.fileList);
that.$emit("change", that.fileList);
}
);
};
};
},
// toBlob方法
//base64转blob
export function 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;
}
搞定!
最后补充说明一点:这种把ip、端口、账号、密码都放在前端的方式很不安全,实现功能的时候请务必再三考虑安全性问题!
更多推荐
已为社区贡献3条内容
所有评论(0)