界面：

这个是纯vue版 

< template >段

<!-- 新增信息template -->
<template>
  <div style="float:left;margin:5px 5px">
    <el-button @click="getFileName"  type="success">选择文件</el-button>
  
   <div style="float:left;margin:5px 5px">
    <ul class="uploadFileList">
      <li v-for="item,index of fileList" :key="index">
        <span class="subString">{
   {item.name}}</span>&nbsp;
        <span>({
   {(item.size/1024/1024).toFixed(5)}}M)</span>
        <div class="floatRight" style="float: right;">
          <i class="el-icon-close" style="cursor: pointer;" @click="deleteMinioFile(index)"></i>
        </div>
      </li>
    </ul>
    </div>
    <input type="file" multiple="multiple" id="minIoFile" ref="minIoFile" v-show="false" @change="getFile">
    <el-button v-if="fileList.length>0" type="success" @click="upload" >上传</el-button>
    
    

   <div style="float:left;margin:5px 5px">

    <ul>
      <li v-for="item,index of urlList" :key="index">
        <span @click="downLoad(item.url,item.name)">{
   {item.name}}

        </span>

                <input type="button" @click="downLoad(item.url,item.name)"  value="下载" />


      </li>
     
    </ul>
   </div>
  </div>
</template>

<script>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-14:54
*/
import { selectMesAdviceList, importExl, getDetails, saveMesPlan } from '@/api/plan/mesAdivce'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import waves from '@/directive/waves' // 水波纹指令


let Minio = require('minio')
let stream = require('stream')
//连接minio文件服务器
var minioClient = new Minio.Client({
    endPoint: '192.168.0.101',   //对象存储服务的URL
    port: 9000,//端口号
    useSSL: false,   //true代表使用HTTPS
    accessKey: 'minioadmin',   //账户id
    secretKey: 'minioadmin',   //密码
    partSize: '50M'
});
export default {
  name: 'MesAdivce',
  components: { Pagination },
  directives: {
    waves
  },
  data: () => ({
    fileListUpload: [],
    limitUpload: 3,
    excelList: [],
     fileList:[],
      urlList:[],
    mesAdviceList: [],
    mesAdviceDetailList: [],
    dialogVisible: false,
    detailsVisible: false,
    dialogFormVisible: false,
    total: 0,
    parameterDto: {
      startTime: '',
      endTime: '',
      current: 1,
      size: 10
    },
    submitForm: {
      planCode: '',
      steelCode: '',
      steelType: '',
      dxfCode: '',
      dxfModel: '',
      dxfUrl: '',
      cutUrl: ''
    }
  }),
  created() {
    this.loadPageTableList()
  },
  methods: {

downLoad(filename,names){

      var x=new XMLHttpRequest();
      var resourceUrl = filename
      x.open("GET", resourceUrl, true);
      x.responseType = 'blob';
      x.onload=function(e){
        // ie10+
        if (navigator.msSaveBlob) {
          var name = resourceUrl.substr(resourceUrl.lastIndexOf("/") + 1);
          return navigator.msSaveBlob(x.response, name);
        } else {
          var url = window.URL.createObjectURL(x.response)
          var a = document.createElement('a');
          a.href = url;
          a.download = names;
          a.click();
        }
      }
      x.send();

    },
    upload(){
      console.log(this.fileList);
      this.fileList.map((item,index) => {
        console.log(item);
        this.uploadMinIo(item,index);
      })
      // console.log(this.fileList);
    },
    deleteMinioFile(index){
      this.fileList.splice(index,1)
    },
    getFileName(){
      let inputDOM = this.$refs.minIoFile;
      inputDOM.click();
    },
    getFile(event){
      console.log(event);
      console.log(document.getElementById('minIoFile').files);
      let files = document.getElementById('minIoFile').files;
      let arr = [];
      let fileSwitch = true;
      if(files.length > 0){
        for(let i = 0;i<files.length;i++){
          if((files[i].size/1024/1024).toFixed(5)>64){
            this.$message({
              message: `${item.name}超过文件的最大长度`,
              type: 'warning'
            });
            fileSwitch = false;
          }
        }
        if(fileSwitch){

          for(let i = 0;i<files.length;i++){
            console.log(files[i]);
             if((files[i].type=='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') 
             || (files[i].type == 'application/vnd.ms-excel')
             || (files[i].type == 'text/plain')
             || (files[i].type == 'image/png')
             || (files[i].type == 'image/gif')
             || (files[i].type == 'image/jpg')
             || (files[i].type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
             || (files[i].type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation')
             ){
              this.fileList.push(files[i])
             }else{
               console.log("类型不对");
             }
           
          }
          console.log(this.fileList);
        }
      }
    },
    //上传文件
    uploadMinIo(fileObj,index) {
     this.fileList=this.fileList.filter((self,el)=>{
       return self != fileObj
     })
      let vm = this
      // const files = fileObj;
      if (fileObj) {
        let file = fileObj
        //判断是否选择了文件
        if (file == undefined) {
          //未选择
          console.log("请上传文件")
        } else {
          //选择
          //获取文件类型及大小
          const fileName = file.name
          const mineType = file.type
          const fileSize = file.size

          //参数
          let metadata = {
            "content-type": mineType,
            "content-length": fileSize
          }
          //判断储存桶是否存在
          minioClient.bucketExists('img', 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
              const blob = vm.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));
                //上传
                minioClient.putObject('img', fileName, bufferStream, fileSize, metadata, function(err, etag) {
                  console.log(etag);
                  if (err == null) {
                    minioClient.presignedGetObject('img', fileName, 24*60*60, function(err, presignedUrl) {
                      if (err) return console.log(err)
                      //输出url
                      console.log(presignedUrl)
                      var only = {url:presignedUrl,name:fileName}
                      console.log(only);
                      vm.urlList.push(only)
                      // window.open(presignedUrl)
                      // this.$notify({
                      //   title: '标题名称',
                      //   message: h('i', { style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
                      // });
                    })
                  }
                  //return console.log(err, etag)
                })
              }
            }
          })
        }

      }
    },
    //base64转blob
    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
  
  },

前后端实现代码如下

vue+springboot 用formdata实现方法详情：

vue实现文件上传，FormData传入后台_背砖程序猿的博客-程序员宅基地