minio本地文件上传/远程url上传

// 本地文件上传
<input type="file" id="fileInput" multiple @change="handleFileUpload">
// 进度条
<el-progress class="progress" :percentage="Number(percentage)" v-if="percentage && percentage < 100" :color="customColors"></el-progress>

• 存储桶连接

// 内网访问速度更快，根据环境切换
let endPoint = localStorage.getItem('endPoint') || '外网地址'
let Minio = require('minio')
let client = null;
let params = {
  endPoint: endPoint, //后端提供
  useSSL: false,
  accessKey: 'accessKey', //后端提供
  secretKey: 'secretKey' //后端提供
}
if (endPoint === '内网地址') {
  params.port = 9000; //端口号 看是否有端口号，没有则不需要
} else {
  delete params.port;
}
client = new Minio.Client(params);

• 本地文件上传

    async handleFileUpload (event) {
      if (this.loading) {
        return
      }
      const files = event.target.files;
      this.loading = true;
      for (let index = 0; index < files.length; index++) {
        const files2 = files[index]
        const params = {
          files: files2,
          prefix: '需要上传至minio的路径地址'
        }
        this.percentage = '0'
        this.uploadFile(params, files.length)
      }
    },

• 上传方法

    async uploadFile (params, listLength) {
      let file = params.files
      let objectName = params.prefix
      const fileName = objectName + file.name
      const reader = new FileReader()
      reader.onload = () => {
        const fileData = new Uint8Array(reader.result)
        const buffer = Buffer.from(fileData)
        client.putObject('你的存储桶名字', fileName, buffer, (err, etag) => {
          if (err) {
            console.error(err)
            return
          }
          this.successNum++; // 多文件上传，进度条
          if (listLength === this.successNum) {
            this.percentage = 100;
            setTimeout(() => {
               this.maskMode = false
               this.percentage = 0;
               this.successNum = 0;
               this.operatorType = 0
               this.getList()
            }, 300);
          } else {
            this.percentage = (((this.successNum) / (listLength + 1)) * 100).toFixed(2);
          }
          if (listLength === this.successNum) {
            this.loading = false
            this.getList()
          }
        })
      }
      reader.readAsArrayBuffer(file)
    },

• 远程url上传方法

    uploadImg (imgs, taskName) {
      this.percentage = 0;
      this.successNum = 0;
      this.maskMode = true;
      // 获取地址形式图片的URL
      let imageUrl = imgs; // 这里是第三方地址形式图片的URL
      // 发起HTTP GET请求获取图片数据
      for (let index = 0; index < imageUrl.length; index++) {
        const element = imageUrl[index];
        //图片名称 昵称_流程_字段_随机数.png
        getImage(element.img).then(res => {
          let file = new File([res], element.imgName, { type: res.type });
          const params = {
            files: file,
            prefix: this.itemList[1].name + '/' + taskName + '/',
          }
          this.uploadFile(params, imageUrl.length)
        })
      }
    },

• 远程图片请求方法

/**
 *
 * @param url 图片地址
 */
export async function getImage (url) {
  const { data } = await axios({
    method: "GET",
    url: "/upload" + url,
    responseType: "blob"
  })
  return data;
}

• 跨域处理

// vue.config.js文件
module.exports = {
  devServer: {
    hot: true,
    disableHostCheck: true,
    proxy: {
      '/upload': {
        //代理图片下载的接口
        target: "下载图片的地址源",
        changeOrigin: true,
        pathRewrite: {
          '^/upload': ''
        }
      }
    }
  },
}