<template>
  <div>
    <!--上傳組件-->
    <el-upload
      class="upload-demo"
      :action="uploadUrl"  // 上傳地址
      :auto-upload="false"  // 禁用自動上傳
      :on-change="handleChange"  // 文件選擇時(shí)觸發(fā)
      :before-upload="handleBeforeUpload"  // 文件上傳前觸發(fā)
      :on-progress="handleProgress"  // 上傳進(jìn)度變化時(shí)觸發(fā)
    >
      <el-button slot="trigger">選取文件</el-button>  // 選擇文件按鈕
      <!--上傳文件按鈕-->
      <el-button style="margin-left: 10px" type="primary" :loading="uploading" :disabled="files.length === 0" @click="handleUpload">
        上傳文件
      </el-button>
      <div class="clearfix"></div>
      <el-progress :percentage="percent"></el-progress>  // 上傳進(jìn)度條
    </el-upload>
  </div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-ui';  // 引入Element UI庫中的消息提示組件
export default {
  data() {
    return {
      files: [],  // 選中的文件列表
      uploading: false,  // 是否正在上傳
      percent: 0,  // 上傳進(jìn)度
      uploadUrl: 'https://your.upload.url'  // 上傳地址
    };
  },
  methods: {
    // 切片上傳
    async upload(file) {
      const chunkSize = 1024 * 1024; // 每個(gè)塊的大小為 1MB
      const fileSize = file.size;  // 文件大小
      const chunks = Math.ceil(fileSize / chunkSize);  // 總塊數(shù)
      const tasks = [];  // 上傳任務(wù)數(shù)組
      let uploaded = 0;  // 已上傳塊數(shù)
      // 文件切割
      for (let i = 0; i < chunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(start + chunkSize, fileSize);
        tasks.push(
          new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append('chunk_index', i);  // 塊編號
            formData.append('chunk_count', chunks);  // 總塊數(shù)
            formData.append('file_id', file.id);  // 文件ID
            formData.append('chunk_data', file.slice(start, end));  // 塊數(shù)據(jù)
            axios
              .post(this.uploadUrl, formData)  // 上傳塊數(shù)據(jù)
              .then(res => {
                uploaded++;
                this.percent = Math.floor((uploaded / chunks) * 100);
                resolve();
              })
              .catch(err => {
                reject(err);
              });
          })
        );
      }
      // 待所有塊上傳完成后，發(fā)送合并請求
      await Promise.all(tasks);
      const res = await axios.post(this.uploadUrl, { file_id: file.id, chunks });
      // 上傳成功，返回文件URL
      if (res.status === 200) {
        return `${this.uploadUrl}/${file.id}`;
      } else {
        throw new Error(res.data.message);
      }
    },
    handleChange(files) {
      this.files = files;
    },
    async handleUpload() {
      try {
        this.uploading = true;
        for (let i = 0; i < this.files.length; i++) {
          const file = this.files[i];
          const url = await this.upload(file);
          // 文件上傳成功，將url展示給用戶 
          ElMessage.success(`文件${file.name}上傳成功！URL：${url}`);
        }
      } catch (err) {
        ElMessage.error(`文件上傳失?。?{err.message}`);
      } finally {
        this.uploading = false;
      }
    },
    handleBeforeUpload() {
      // TODO: 檢查文件大小、類型等
    },
    handleProgress(event, file) {
      // 顯示上傳進(jìn)度
      this.percent = Math.floor((event.loaded / event.total) * 100);
    }
  }
};
</script>