博客

最近项目中使用了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、端口、账号、密码都放在前端的方式很不安全，实现功能的时候请务必再三考虑安全性问题！