# java_fileUpload_demo

**Repository Path**: java_utils_demo/java_file-upload_demo

## Basic Information

- **Project Name**: java_fileUpload_demo
- **Description**: 关于文件上传的一些基本介绍（如文件上传、分片上传、md5值秒传、断点续传等）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 15
- **Forks**: 16
- **Created**: 2023-07-12
- **Last Updated**: 2025-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# java_fileUpload_demo 对应的前端demo页面(vue2)代码，至于怎么搭建前端脚手架和启动vue2框架项目就网上找搭建教程了！

# 本文件上传demo主要演示：
# 单文件、多文件、单文件分片、多文件分片、多文件(md5)分片秒传、单文件分片断点续传等上传方案到项目本地磁盘位置；
# 以及单文件、多文件分片上传至minio文件服务器中的demo；此demo需要在配置文件中将各配置加载项设置为true，加上redis依赖注入

### 需要安装的前端插件
# npm install axios
# npm install element-ui
# npm install spark-md5

![img.png](img.png)

#### 页面代码(含js)如下：
<template>
    <div>
        <page-nav></page-nav>
        <el-divider content-position="center">文件上下传demo</el-divider>
        <div class="uploadFileTag">
        <!-- <el-button @click="testRequest">接口测试</el-button> -->
            <!-- 单文件上传 -->
            <div class="singleFileUpload">
                <el-upload ref="upload" name="file" action="#"
                    :on-change="selectSingleFile" :on-remove="removeSingleFile" :file-list="singleFile.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="singleFileUpload">点击进行单文件上传</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试单文件上传</div>
                </el-upload> 
            </div>
            <!-- 多文件上传 -->
            <div class="multipleFileUpload">
                <el-upload ref="upload" name="files" action="#"
                    :on-change="selectMultipleFile" :on-remove="removeMultipleFile" :file-list="multipleFile.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="multipleFileUpload">点击进行多文件上传</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试多文件上传</div>
                </el-upload>
            </div>
            <!-- 单文件分片上传 -->
            <div class="singleFilePartUpload">
                <el-upload  ref="upload" name="files" action="#"
                    :on-change="selectSinglePartFile" :on-remove="removeSingleFilePart" :file-list="singleFilePart.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="singleFilePartUpload">点击进行单文件分片上传</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试单文件分片上传</div>
                </el-upload>
            </div>
             <!-- 多文件分片上传 -->
             <div class="multipleFilePartUpload">
                <el-upload ref="upload" name="files" action="#"
                    :on-change="selectMultiplePartFile" :on-remove="removeMultiplePartFile" :file-list="multipleFilePart.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="multipleFilePartUpload">点击进行多文件分片上传</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试多文件分片上传</div>
                </el-upload>
            </div>
        </div>
        <br>
        <div class="uploadFileTag">
             <!-- 多文件(分片)秒传 -->
             <div class="singleFilePartUpload">
                <el-upload  ref="upload" name="files" action="#"
                    :on-change="selectMultiplePartFlashFile" :on-remove="removeMultiplePartFlashFile" :file-list="multipleFilePartFlash.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="multipleFilePartFlashUpload">点击进行文件秒传</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试多文件(分片MD5值)秒传</div>
                </el-upload>
            </div>
             <!-- 单文件(分片)断点上传 -->
             <div class="multipleFilePartUpload">
                <el-upload ref="upload" name="files" action="#"
                    :on-change="selectSingleFilePartPoint" :on-remove="removeSingleFilePartPoint" :file-list="singleFilePartPoint.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" :type="singleFilePartPoint.isStop ? 'info':'success'" @click="singleFilePartPointUpload">{{ singleFilePartPoint.isStop ? '点击继续文件断点上传' : '点击进行文件断点上传' }}</el-button>
                    <!-- <el-button style="margin-left: 10px;" size="mini" type="info" :disabled = "!singleFilePartPoint.isStop"  @click="singleFilePartPoint.isStop = false">{{ singleFilePartPoint.isStop ? '继续上传' : '正在上传' }}</el-button> -->
                    <div slot="tip" class="el-upload__tip">主要用于测试单文件(分片)断点上传</div>
                </el-upload>
            </div>
            <!-- 单文件上传Minio -->
            <div class="singleFileUploadMinio">
                <el-upload  ref="upload" name="files" action="#"
                    :on-change="selectSingleFileMinio" :on-remove="removeSingleFileMinio" :file-list="singleFileMinio.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="singleFileUploadMinio">点击进行单文件分片上传Minio</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试单文件上传Minio</div>
                </el-upload>
            </div>
             <!-- 多文件分片上传Minio -->
             <div class="multipleFilePartUploadMinio">
                <el-upload ref="upload" name="files" action="#"
                    :on-change="selectMultiplePartFileMinio" :on-remove="removeMultiplePartFileMinio" :file-list="multipleFilePartMinio.fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="multipleFilePartUploadMinio">点击进行多文件分片上传Minio</el-button>
                    <div slot="tip" class="el-upload__tip">主要用于测试多文件分片上传Minio</div>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script>
import PageNav from './PageNav.vue';

import SparkMD5  from "spark-md5"

export default {
  components: { PageNav },
    name: 'StudyDemoFileUpload',

    data() {
        return {
            urlPrefix: 'http://localhost:8082',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            singleFile: {
                file: '',
                fileList: []
            },
            multipleFile: {
                fileList: []
            },
            singleFilePart: {
                file: '',
                fileList: [],
                partIndex: 0,  // 当前分片
                partNum: 0, // 总分片数
                fileName: '',   // 文件名
                fileUid: '',   // 文件uuid
            },
            multipleFilePart: {
                fileList: [],
                fileData: []
            },
            multipleFilePartFlash: {
                fileList: [],
                fileData: [],
                filePartUploadInfo: [],
                filePartUploadData: []
            },
            singleFilePartPoint: {
                file: '',
                fileList: [],
                fileData: [],
                partNum: 0, // 总分片数
                fileName: '',   // 文件名
                fileUid: '',   // 文件uuid
                fileMd5: '',   // 文件Md5
                isStop: false,
                randomCount: 0
            },
            singleFileMinio: {
                file: '',
                fileList: []
            },
            multipleFilePartMinio: {
                fileList: [],
                fileData: []
            },
        };
    },

    mounted() {
        
    },

    methods: {
        testRequest(){
            let url = this.urlPrefix + "/file/fileTest";
            this.$post(url,null,null,resp => {
                let res = resp.data;
                if (res.data){
                    this.$message.success(res.msg)
                }else{
                    this.$message.error("测试失败")
                }
            })
        },
        // 下面是单文件上传的一些方法
        selectSingleFile(file, fileList){
            this.singleFile.file = file
            this.singleFile.fileList = []
            this.singleFile.fileList.push(file)
            console.log("单文件上传->选中的文件：",this.singleFile.file)
        },
        removeSingleFile(file, fileList){
            this.singleFile.file = ''
            console.log("单文件上传->移除选中的文件：",this.singleFile.file)
        },
        singleFileUpload(){
            let url = this.urlPrefix + "/file/singleFileUpload";
            var fileParam = new FormData();
            fileParam.append("file",this.singleFile.file.raw);

            this.$upFile(url,fileParam,null,resp => {
                let res = resp.data;
                if (res.data){
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        // 下面是多文件上传的一些方法
        selectMultipleFile(file, fileList){
            this.multipleFile.fileList.push(file)
            console.log("多文件上传->选中的文件：",this.multipleFile.fileList)
        },
        removeMultipleFile(file, fileList){
            console.log("多文件上传->移除选中的文件：",this.multipleFile.fileList)
        },
        multipleFileUpload(){
            let url = this.urlPrefix + "/file/multipleFileUpload";
            var fileParam = new FormData();
            this.multipleFile.fileList.forEach( (val, index) => {
                fileParam.append("files", val.raw);
            });

            this.$upFile(url,fileParam,null,resp => {
                let res = resp.data;
                if (res.data){
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        // 下面是单文件分片上传的一些方法
        selectSinglePartFile(file, fileList){
            this.singleFilePart.file = file
            this.singleFilePart.fileList = []
            this.singleFilePart.fileList.push(file)
            this.singleFilePart.fileName = file.name
            console.log("单文件分片上传->选中的文件：",this.singleFilePart.file)
        },
        removeSingleFilePart(file, fileList){
            this.singleFilePart.file = ''
            console.log("单文件分片上传->移除选中的文件：",this.singleFilePart.file)
        },
        singleFilePartUpload(){
            let url = this.urlPrefix + "/file/singleFilePartUpload";
            let partSize = 8; //MB
            this.singleFilePart.fileUid = this.singleFilePart.file.uid
            this.singleFilePart.partNum = Math.ceil(this.singleFilePart.file.size / 1024 / 1024 / partSize) // 2MB一片
            for(let i = 0; i < this.singleFilePart.partNum; i++ ){
                var fileParam = new FormData();
                fileParam.append('filePart', this.singleFilePart.file.raw.slice(i * 1024 * 1024 * partSize, (i + 1) * 1024 * 1024 * partSize))
                fileParam.append('partIndex', i)
                fileParam.append('partNum', this.singleFilePart.partNum)
                fileParam.append('fileName', this.singleFilePart.fileName)
                fileParam.append('fileUid', this.singleFilePart.fileUid)

                this.$upFile(url,fileParam,null,resp => {
                    let res = resp.data;
                    //判断最后一个分片文件传完之后，后台检验文件上传情况
                    if (res.code === 200){
                        if(i == res.msg){
                            var info = '当前分片 ' + i +' 上传成功！' + ';返回的分片是 ' + res.msg
                            console.log(info)
                        }else{
                            var info = '当前分片 ' + i +' 上传失败！' + ';返回的分片是 ' + res.msg
                            console.log(info)
                        }
                        if(res.msg == this.singleFilePart.partNum - 1){
                            this.$message.success('单文件分片上传完成')
                        }
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        // 下面多文件分片上传的一些方法
        selectMultiplePartFile(file, fileList){
            this.multipleFilePart.fileList.push(file)
            console.log("多文件分片上传->选中的文件：",this.multipleFilePart.fileList)
        },
        removeMultiplePartFile(file, fileList){
            this.multipleFilePart.fileList = this.multipleFilePart.fileList.filter(item => item.uid != file.uid);
            console.log("多文件分片上传->移除选中的文件：",this.multipleFilePart.fileList)
        },
        multipleFilePartUpload(){
            let fileUploadCount = 0;
            let url = this.urlPrefix + "/file/multipleFilePartUpload";
            let partSize = 8; //MB
            for(let i = 0; i < this.multipleFilePart.fileList.length; i++ ){
                let partNum = Math.ceil(this.multipleFilePart.fileList[i].size / 1024 / 1024 / partSize)
                for(let j = 0; j < partNum; j++ ){
                    let partFileUid = '';
                    var fileParam = new FormData();
                    fileParam.append('filePart', this.multipleFilePart.fileList[i].raw.slice(j * 1024 * 1024 * partSize, (j + 1) * 1024 * 1024 * partSize))
                    fileParam.append('partIndex', j)
                    fileParam.append('partNum', partNum)
                    fileParam.append('fileName', this.multipleFilePart.fileList[i].name)
                    fileParam.append('fileUid', this.multipleFilePart.fileList[i].uid)
                    partFileUid = this.multipleFilePart.fileList[i].uid
                    this.$upFile(url,fileParam,null,resp => {
                        let res = resp.data;
                        //判断最后一个分片文件传完之后，后台检验文件上传情况
                        if (res.code == 200){
                            if(j == res.data){
                                var info = '当前分片上传成功!当前分片:' + j + ';返回分片:' + res.data + ';当前uid:' + partFileUid + ';返回uid:' + res.msg
                                console.log(info)
                            }else{
                                var info = '当前分片上传失败!当前分片:' + j + ';返回分片:' + res.data + ';当前uid:' + partFileUid + ';返回uid:' + res.msg
                                console.log(info)
                            }
                            if(res.data == partNum - 1){
                                fileUploadCount ++;
                                var info = this.multipleFilePart.fileList[i].name + '：上传成功!uid:' + partFileUid
                                console.log(info)
                                if(fileUploadCount == this.multipleFilePart.fileList.length - 1){
                                    console.log('多文件分片上传完成')
                                    this.$message.success('多文件分片上传完成')
                                }
                            }
                        }else{
                            var info = '多文件分片上传失败!当前分片:' + j + ';当前uid:' + partFileUid
                            console.log(info)
                            this.$message.error(res.msg)
                        }
                    })
                }
            }
            
        },
        // 下面多文件(分片)秒传的一些方法
        async selectMultiplePartFlashFile(file, fileList){
            this.multipleFilePartFlash.fileList.push(file)
            console.log("多文件(分片)秒传->选中的文件：",this.multipleFilePartFlash.fileList)
            let partSize = 8; //MB
            let partNum = Math.ceil(file.size / 1024 / 1024 / partSize)
            for(let j = 0; j < partNum; j++ ){
                let filePartFlash = {
                    "file": '',
                    "fileName": '',
                    "fileUid": '',
                    "fileMd5": '',
                    "partIndex": '',
                    "partNum": ''
                }
                let partFile = file.raw.slice(j * 1024 * 1024 * partSize, (j + 1) * 1024 * 1024 * partSize)
                filePartFlash.fileName = file.name
                filePartFlash.fileUid = file.uid
                filePartFlash.partIndex = j
                filePartFlash.partNum = partNum
                filePartFlash.fileMd5 = SparkMD5.ArrayBuffer.hash(await this.readFile(partFile))
                this.multipleFilePartFlash.filePartUploadInfo.push(filePartFlash)
                filePartFlash.file = partFile
                this.multipleFilePartFlash.filePartUploadData.push(filePartFlash)
            }
            console.log("多文件(分片)秒传->选中的分片：",this.multipleFilePartFlash.filePartUploadInfo)
        },
        removeMultiplePartFlashFile(file, fileList){
            this.multipleFilePartFlash.fileList = this.multipleFilePartFlash.fileList.filter(item => item.uid != file.uid);
            this.multipleFilePartFlash.filePartUploadInfo = this.multipleFilePartFlash.filePartUploadInfo.filter(item => item.fileUid != file.uid);
            this.multipleFilePartFlash.filePartUploadData = this.multipleFilePartFlash.filePartUploadData.filter(item => item.fileUid != file.uid);
            console.log("多文件(分片)秒传->移除选中的文件：",this.multipleFilePartFlash.fileList)
            console.log("多文件(分片)秒传->移除选中的分片后：",this.multipleFilePartFlash.filePartUploadInfo)
        },
        multipleFilePartFlashUpload(){
            let fileCheckUrl = this.urlPrefix + "/file/checkDiskFile";
            let fileUploadUrl = this.urlPrefix + "/file/multipleFilePartFlashUpload";
           
            let fileUploadCount = 0;
            let notUploadFilePart = []

            this.$post(fileCheckUrl,this.multipleFilePartFlash.filePartUploadInfo,null,resp => {
                let res = resp.data;
                if(res.code == 200){
                    //后端返回来不需要上传的分片相关信息，包括这些分片在后端服务器的存储索引
                    notUploadFilePart = res.data
                    //不需要上传的分片文件
                    // notUploadFilePart = filePartUploadInfo.filter(item => notUploadFilePart.some(n => n.fileUid == item.fileUid && n.partIndex == item.partIndex))
                    //需要上传的分片文件
                    this.multipleFilePartFlash.filePartUploadData = this.multipleFilePartFlash.filePartUploadData.filter(item => !notUploadFilePart.some(n => n.fileUid == item.fileUid && n.partIndex == item.partIndex))
                    console.log("不需要上传的分片文件：",notUploadFilePart)
                    console.log("需要上传的分片文件：",this.multipleFilePartFlash.filePartUploadData)
                    for(let i = 0; i < this.multipleFilePartFlash.filePartUploadData.length; i++ ){
                        var fileParam = new FormData();
                        fileParam.append('filePart', this.multipleFilePartFlash.filePartUploadData[i].file)
                        fileParam.append('fileInfo', JSON.stringify(this.multipleFilePartFlash.filePartUploadData[i]))
                        fileParam.append('fileOther', JSON.stringify(notUploadFilePart))
                        //对需要上传的分片上传至后端服务器
                        this.$upFile(fileUploadUrl,fileParam,null,resp => {
                            let res = resp.data;
                            //判断最后一个分片文件传完之后，后台检验文件上传情况
                            
                            if (res.code == 200){
                                fileUploadCount ++;
                                if(res.msg != this.multipleFilePartFlash.filePartUploadData[i].fileUid && i != res.data ){
                                    var info = '当前分片上传失败!当前分片:' + j + ';返回分片:' + res.data + ';当前uid:' + this.multipleFilePartFlash.filePartUploadData[i].fileUid + ';返回uid:' + res.msg
                                    console.log(info)
                                }
                                if(fileUploadCount == this.multipleFilePartFlash.filePartUploadData.length){
                                    console.log('多文件分片上传完成')
                                    this.$message.success('多文件(分片)秒传完成')
                                }
                            }else{
                                console.log('多文件(分片)秒传失败')
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }else{
                    this.$message.error(res.msg)
                    return 
                }
            })
        },
        // 下面单文件(分片)断点上传的一些方法
        async selectSingleFilePartPoint(file, fileList){
            this.singleFilePartPoint.file = file
            this.singleFilePartPoint.fileList = []
            this.singleFilePartPoint.fileList.push(file)
            this.singleFilePartPoint.fileName = file.name
            this.singleFilePartPoint.fileMd5 = SparkMD5.ArrayBuffer.hash(await this.readFile(this.singleFilePartPoint.file.raw))
            console.log("单文件(分片)断点上传->选中的文件：",this.singleFilePartPoint.fileList)
        },
        removeSingleFilePartPoint(file, fileList){
            this.singleFilePartPoint.file = ''
            console.log("单文件(分片)断点上传->移除选中的文件：",this.singleFilePartPoint.file)
        },
        async singleFilePartPointUpload(){
            let checkUploadUrl = this.urlPrefix + "/file/checkUploadFileIndex";
            let fileUploadUrl = this.urlPrefix + "/file/singleFilePartPointUpload";
            let partSize = 8; //MB
            
            let partNum = Math.ceil(this.singleFilePartPoint.file.size / 1024 / 1024 / partSize)
            
            let fileInfo = {}
            fileInfo.fileName = this.singleFilePartPoint.file.name
            fileInfo.fileUid = this.singleFilePartPoint.file.uid
            fileInfo.fileMd5 = this.singleFilePartPoint.fileMd5
            fileInfo.fileSize = this.singleFilePartPoint.file.size
            fileInfo.partNum = partNum

            this.$post(checkUploadUrl,fileInfo,null,resp => {
                let res = resp.data;
                //判断最后一个分片文件传完之后，后台检验文件上传情况
                if (res.code === 200){
                    fileInfo = res.data
                    console.log("已上传文件部分：",fileInfo)  

                    if(this.singleFilePartPoint.randomCount != 0 || fileInfo.parts.length != 0) {
                        this.singleFilePartPoint.isStop = false
                        console.log("该文件之前被模拟过随机停止的情况,此次上传不再随机停止节点了,直接上传还未上传的文件")
                    }
  
                    let random = Math.floor(Math.random()*partNum)
                    
                    for(let i = 0; i < partNum; i++ ){

                        //模拟上传随机被暂停，模拟网络掉线情况等
                        if(i == random && this.singleFilePartPoint.randomCount == 0 && fileInfo.parts.length == 0) {
                            this.singleFilePartPoint.isStop = true
                            this.singleFilePartPoint.randomCount ++ 
                            console.log("随机停止分片节点:",random)
                            break;
                        }
                        //如果返回已经上传的partIndex是当前i，则不在上传该part文件
                        if(fileInfo.parts.indexOf(i)!==-1) continue;

                        fileInfo.partIndex = i
                        var fileParam = new FormData();
                        fileParam.append('filePart', this.singleFilePartPoint.file.raw.slice(i * 1024 * 1024 * partSize, (i + 1) * 1024 * 1024 * partSize))
                        fileParam.append('fileInfo', JSON.stringify(fileInfo))
                        this.$upFile(fileUploadUrl,fileParam,null,resp => {
                            let res = resp.data;
                            //判断最后一个分片文件传完之后，后台检验文件上传情况
                            if (res.code === 200){
                                if(i != res.msg){
                                    var info = '当前分片 ' + i +' 上传失败！' + ';返回的分片是 ' + res.msg
                                    console.log(info)
                                }
                                if(res.msg == partNum - 1){
                                    this.singleFilePartPoint.randomCount = 0
                                    this.$message.success('单文件(分片)断点上传完成')
                                }
                            }else{
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        singleFilePartPointStopUpload(){
            this.singleFilePartPoint.isStop = !this.singleFilePartPoint.isStop
        },
        // 下面是单文件上传Minio的一些方法
        selectSingleFileMinio(file, fileList){
            this.singleFileMinio.file = file
            this.singleFileMinio.fileList = []
            this.singleFileMinio.fileList.push(file)
            console.log("单文件上传Minio->选中的文件：",this.singleFileMinio.file)
        },
        removeSingleFileMinio(file, fileList){
            this.singleFileMinio.file = ''
            console.log("单文件上传Minio->移除选中的文件：",this.singleFileMinio.file)
        },
        singleFileUploadMinio(){
            let url = this.urlPrefix + "/minio/singleFileUploadMinio";
            var fileParam = new FormData();
            fileParam.append("file",this.singleFileMinio.file.raw);

            this.$upFile(url,fileParam,null,resp => {
                let res = resp.data;
                if (res.data){
                    this.$message.success(res.msg)
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        // 下面多文件分片上传Minio的一些方法
        selectMultiplePartFileMinio(file, fileList){
            this.multipleFilePartMinio.fileList.push(file)
            console.log("多文件分片上传->选中的文件：",this.multipleFilePartMinio.fileList)
        },
        removeMultiplePartFileMinio(file, fileList){
            this.multipleFilePartMinio.fileList = this.multipleFilePartMinio.fileList.filter(item => item.uid != file.uid);
            console.log("多文件分片上传->移除选中的文件：",this.multipleFilePartMinio.fileList)
        },
        multipleFilePartUploadMinio(){
            let fileUploadCount = 0;
            let url = this.urlPrefix + "/minio/partFileUploadMinio";
            let partSize = 8; //MB
            let partFileUid = [];
            for(let i = 0; i < this.multipleFilePartMinio.fileList.length; i++ ){
                let partNum = Math.ceil(this.multipleFilePartMinio.fileList[i].size / 1024 / 1024 / partSize)
                let partFileIndex = {
                    fileName: this.multipleFilePartMinio.fileList[i].name,
                    fileUid: this.multipleFilePartMinio.fileList[i].uid,
                    partTotalNum: partNum,
                    partIndex: ''
                }
                partFileUid.push(this.multipleFilePartMinio.fileList[i].uid + '')
                for(let j = 0; j < partNum; j++ ){
                    partFileIndex.partIndex = j
                    var fileParam = new FormData();
                    fileParam.append('file', this.multipleFilePartMinio.fileList[i].raw.slice(j * 1024 * 1024 * partSize, (j + 1) * 1024 * 1024 * partSize))
                    fileParam.append('partFileIndex', JSON.stringify(partFileIndex))
                    
                    this.$upFile(url,fileParam,null,resp => {
                        let res = resp.data;
                        //判断最后一个分片文件传完之后，后台检验文件上传情况
                        if (res.code == 200){

                            if(!res.data){
                                var info = '当前分片上传Minio失败!uid:' + partFileUid + ';当前分片:' + j + ';返回分片:' + res.msg
                                console.log(info)
                            }

                            let isUid = partFileUid.includes(res.msg)
                            if(isUid){
                                fileUploadCount ++;
                                if(fileUploadCount == this.multipleFilePartMinio.fileList.length){
                                    console.log('多文件分片上传Minio完成')
                                    this.$message.success('多文件分片上传Minio完成')
                                }
                            }
                        }else{
                            var info = '多文件分片上传Minio失败!当前分片:' + j + ';当前uid:' + partFileUid
                            console.log(info)
                            this.$message.error(res.msg)
                        }
                    })
                }
            }
            
        },
        getFileMd5(file){
            return new Promise((resolve, reject) => {
                let fileReader = new FileReader()
                fileReader.onload = function (event) {
                    let fileMd5 = SparkMD5.ArrayBuffer.hash(event.target.result)
                    resolve(fileMd5)
                }
                    fileReader.readAsArrayBuffer(file)
                })
        },
        readFile(file){
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = e => resolve(e.target.result);
                reader.onerror = e => reject(e);
                reader.readAsArrayBuffer(file);
            })
        }
    },
};
</script>

<style lang="less" scoped>
    .uploadFileTag{
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: row; /*弹性布局的方向*/
        .singleFileUpload{
            width: 25%;
        }
        .multipleFileUpload{
            width: 25%;
        }
        .singleFilePartUpload{
            width: 25%;
        }
        .multipleFilePartUpload{
            width: 25%;
        }
        .singleFileUploadMinio{
            width: 25%;
        }
        .multipleFilePartUploadMinio{
            width: 25%;
        }
    }
</style>