<template>
    ...
    <!-- 文件上傳 -->
    <el-upload
               :show-file-list="false"
               action
               class="mirror-upload"
               :http-request="putinMirror"
               >
        <button>上傳環(huán)境鏡像</button>
    </el-upload>
    ...
    <!-- 進(jìn)度顯示 -->
     <el-progress
                  :percentage="progress"
                  :indeterminate="true"
                  />
    ...
</template>
<script setup>
    // 引入封裝好的接口api，根據(jù)提供的接口文檔自行封裝即可
    import {
        // 普通get請(qǐng)求api
        checkMirrorFileApi,
        // 普通post請(qǐng)求api
        uploadShardFileApi,
    } from "@/assets/api/uploadApi.js"
    import { ref } from 'vue'
    // 文件輸進(jìn)度條
    const progress = ref(0)
    ...
</script>

/* 上傳環(huán)境鏡像 分片上傳 */
const putinMirror = async (file) => {
    // 校驗(yàn)文件是否符合規(guī)范（注意這里的異步方法，因?yàn)檎{(diào)用了接口加上await，校驗(yàn)函數(shù)若不調(diào)用接口可以不寫await，否則返回promise對(duì)象）
    if (await checkMirrorFile(file)) {
        // 文件相關(guān)信息
        let files = file.file
        // 從0開始的切片
        let shardIndex = 0
        // 調(diào)用切片方法
        uploadFile(files, shardIndex)
    }
}

/* 校驗(yàn)上傳鏡像文件是否符合規(guī)范 */
const checkMirrorFile = async (file) => {
    // 校驗(yàn)文件格式是否正確，支持.acow2/.iso/.ovf/.zip/.tar
    let fileType = file.file.name.split('.')
    if (fileType[fileType.length - 1] !== 'acow2' && fileType[fileType.length - 1] !== 'iso' && fileType[fileType.length - 1] !== 'ovf' && fileType[fileType.length - 1] !== 'zip' && fileType[fileType.length - 1] !== 'tar') {
        ElMessage.warning('文件格式錯(cuò)誤，僅支持.acow2/.iso/.ovf/.zip/.tar')
        return false
    }
    // 校驗(yàn)文件大小是否滿足
    let fileSize = file.file.size
    //文件大小是否超出20G
    if (fileSize > 20 * 1024 * 1024 * 1024) {
        ElMessage.warning('上傳文件大小不超過(guò)20G')
        return false
    }
    const res = await checkMirrorFileApi()
    if (res.code !== 200) {
        ElMessage.warning('暫時(shí)無(wú)法查看磁盤可用空間，請(qǐng)重試')
        return false
    }
    // 查看磁盤容量大小
    if (res.data.diskDevInfos && res.data.diskDevInfos.length > 0) {
        let saveSize = 0
        res.data.diskDevInfos.forEach(i => {
            // 磁盤空間賦值
            if (i.devName === '/dev/mapper/centos-root') {
                // 返回值為GB，轉(zhuǎn)為字節(jié)B
                saveSize = i.free * 1024 * 1024 * 1024
            }
        })
        // 上傳的文件大小沒(méi)有超出磁盤可用空間
        if (fileSize < saveSize) {
            return true
        } else {
            ElMessage.warning('文件大小超出磁盤可用空間容量')
            return false
        }
    } else {
        ElMessage.warning('文件大小超出磁盤可用空間容量')
        return false
    }
}

/* 文件切片上傳 */
const uploadFile = async (file, shardIndex, createTime, savePath, relativePath, timeMillis) => {
    // 文件名
    let name = file.name
    // 文件大小
    let size = file.size
    // 分片大小
    let shardSize = 1024 * 1024 * 5
    // 分片總數(shù)
    let shardTotal = Math.ceil(size / shardSize)
    if (shardIndex >= shardTotal) {
        isAlive.value = false
        progress.value = 100
        return
    }
    // 文件開始結(jié)束的位置
    let start = shardIndex * shardSize
    let end = Math.min(start + shardSize, size)
    // 開始切割
    let packet = file.slice(start, end)
    let formData = new FormData()
    formData.append("file", packet)
    formData.append("fileName", name)
    formData.append("size", size)
    formData.append("shardIndex", shardIndex)
    formData.append("shardSize", shardSize)
    formData.append("shardTotal", shardTotal)
    // 下面這些值是后端組裝切片時(shí)需要的，跟前端關(guān)系不大
    if (createTime) formData.append("createTime", createTime)
    if (savePath) formData.append("savePath", savePath)
    if (shardIndex < shardTotal) {
        // 進(jìn)度條保留兩位小數(shù)展示
        progress.value = ((shardIndex / shardTotal) * 100).toFixed(2) * 1
        const res = await uploadShardFileApi(formData)
        if (res.code !== 200) {
            ElMessage.error(res.msg)
            progress.value = 0
            return
        }
        if (res.msg == '上傳成功' && res.data.fileName && res.data.filePath) {
            // 這里為所有切片上傳成功后進(jìn)行的操作
            ...
        }
        shardIndex++
        uploadFile(file, shardIndex, res.data.createTime, res.data.savePath, res.data.relativePath, res.data.timeMillis)
    }
}

const downloadMirror = async (item) => {
  let t = {
    id: item.id,
  }
  const res = await downloadMirrorApi(t)
  if (res.headers["content-disposition"]) {
    let temp = res.headers["content-disposition"].split(";")[1].split("filename=")[1]
    let fileName = decodeURIComponent(temp)
    // 通過(guò)創(chuàng)建a標(biāo)簽實(shí)現(xiàn)文件下載
    let link = document.createElement('a')
    link.download = fileName
    link.style.display = 'none'
    link.href = res.data.msg
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else {
    ElMessage({
      message: '該文件不存在',
      type: 'warning',
    })
  }
}