vue中使用mino上传文件

1.安装minio

npm i --save minio@7.0.18

2.文件服务信息配置

export  const baseUrlMinio = {
  config:{
    endPoint: 'xxxxxxxxx',  //文件服务器地址
    port: 9000,//文件服务器端口
    useSSL: false,
    accessKey: 'xxxxxxxxxxxxxxx',// 文件服务器账号
    secretKey: 'xxxxxxxxxxxxxxx' // 文件服务器密码 
  },
  bucket:'xxxxxxxxxxxxxxx',  // 文件服务器的桶
  auth:'http://'  
};

3.utils函数准备

// 获取当前日期
export function  dateNumber(sp=''){
  const date = new Date()
  const  year = date.getFullYear()
  const  month = date.getMonth()>9?date.getMonth()+1:'0'+(date.getMonth()+1)
  const  day = date.getDate();
  return year.toString()+month+day.toString()
}

/**
 * 获取uuid
 */
export function getUUID () {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
  })
}

4.minio业务逻辑

const Minio = require('minio');
import {dateNumber, getUUID} from '@/utils'
import {baseUrlMinio} from './config'
import {decodeDesString} from "@/plugins/crypto-js";
import axios from "axios";
/*
* 服务器配置信息
* */
const {config, bucket,auth} = baseUrlMinio

/*因为config里面的文件服务器账号和密码，我是写的加密后的密文，所以这里有解密操作
* 解密
* */
config.accessKey = decodeDesString(decodeDesString(config.accessKey))
config.secretKey = decodeDesString(decodeDesString(config.secretKey))

/*
  * 初始化Minio
  * */
const minioClient = new Minio.Client(config)
// 公共上传方法
export const minioUploads = (file, progress, success, error) => {
  if (file.name.lastIndexOf('.') < 0) {
    error({code: 500, msg: '文件格式错误,请重新上传'})
    return false
  }
  if (file.size > 1024 * 1024 * 300) {
    error({code: 500, msg: '文件大小不能超过300M'})
    return false
  }
  /*
  获取文件类型以及文件路径
  * */
  const suffixType =file&&file.name?file.name.substr(file.name.lastIndexOf('.')):''
  const UrlName = `${dateNumber()}/${getUUID()}${suffixType}`

/*
* 获取服务器以及上传文件
* */
  minioClient.presignedPutObject(bucket, UrlName, 0.5 * 60 * 60, function (err, presignedUrl) {
    if (err) {
      error({code: 500, msg: '未获取到文件服务器,请联系管理员'})
      return false
    }
    axios.put(presignedUrl, file, {
      headers: {'Content-Type': file.type},
      timeout: 1000 * 60 * 30,
      onUploadProgress: function (progressEvent) {
        /*
        * 返回文件当前上传的进度
        * */
        progress({loaded:progressEvent.loaded,total:progressEvent.total,proNum:Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0))})
      }
    }).then((res) => {
      if (res.status !== 200) {
        error({code: 500, msg: '文件上传失败,请联系管理员'})
        return false
      }
      /*
      * 自定义上传成功后返回的信息
      * */
      success({
        data: {
          url: `${auth}${config.endPoint}:${config.port}/${bucket}/${UrlName}`,
          name: file.name,
          size: file.size,
        },
        code: 0,
        msg: '上传成功',
      })
    }).catch(() => {
      error ({data: null, code: 500, msg: '上传异常,请联系管理员',})
    })
  })
}

5.使用

	<el-upload
        class="upload-demo"
        ref="upload"
        action=""
        accept=".doc,.docx,image/*,.pdf,.jpg, .jpeg, .png,.xls,.xlsx"
        :show-file-list="false"
        :http-request="uploadFile">
        <el-button size="small">点击上传</el-button>
      </el-upload>
  // 上传文件
    uploadFile(file) {
      const fileObj = item.file;  
      minioUploads(fileObj,progress=>{
      //taskProgress data中定义的字段
         //上传中进度返回
        }, res=>{
        //成功时返回的信息
        })
      },error=>{
      //错误时反悔呢信息
      })
    },