vue+elementui+minio实现前端直接上传文件到minio服务端存储

本文介绍了如何使用Vue和Element UI框架配合Minio服务，实现在前端页面直接选择并上传文件，包括文件类型限制、上传过程和成功/失败提示。通过实例代码展示了如何进行文件预处理、上传操作以及下载链接的获取。

vue+elementui+minio实现前端直接上传文件到minio服务端存储
呈现如下图：
在这里插入图片描述

实现方法

<template>
  <div class="minioBox">
    <el-button style="marginRight:10px;" @click="getFileName" size="mini" type="success">选择文件</el-button>
    <input type="file" multiple="multiple" id="minIoFile" ref="minIoFile" v-show="false" @change="getFile">
    <el-button v-if="fileList.length>0" style="marginRight:10px;" @click="upload" size="mini" type="success">上传</el-button>
    <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>
    <ul>
      <li v-for="item,index of urlList" :key="index">
        <span @click="downLoad(item.url,item.name)">{
  
  {item.name}}-----</span>
      </li>
    </ul>
  </div>
</template>
<script>

let Minio = require('minio')
let stream = require('stream')
//连接minio文件服务器
var minioClient = new Minio.Client({
    endPoint: '***',   //对象存储服务的URL
    port: 9000,//端口号
    useSSL: false,   //true代表使用HTTPS
    accessKey: '***',   //账户id
    secretKey: '***',   //密码
    partSize: '50M'
});
//上边这块需要注意，放上minio的账号密码，存储服务器url（容易出错，格式如192.168.5.30,不要多写）,以及端口号
export default {
  data(){
    return{
      fileList:[],
      urlList:[]
    }
  },
  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.last