基于Vue 和 iView分片上传功能实现(上传组件)

<template>
  <div>
    <!-- iView的Upload组件 -->
    <Upload
      :action="uploadAction"
      :before-upload="beforeUpload"
      :on-progress="handleProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="false"
      :headers="uploadHeader"
    >
      <Button>选择文件</Button>
    </Upload>
    <div v-if="uploading">
      <Progress :percent="uploadProgress"></Progress>
    </div>
  </div>
</template>

data() {
  return {
    uploadHeader: { 
      Authorization: localStorage.token,  // 上传请求的授权头
      Accept: '*/*'  // 允许所有类型的响应
    },
    fileName: '', // 存储文件名
    fileSize: 0,  // 存储文件大小
    chunkSize: 5 * 1024 * 1024,  // 每个分片的大小，这里设置为5MB
    fileChunks: [],  // 存储文件的所有分片
    uploading: false,  // 是否正在上传
    uploadProgress: 0,  // 上传进度
    currentChunkIndex: 0,  // 当前上传的分片索引
    uploadAction: `${this.baseURL}/xxxx`,  // 上传分片的API
    uploadActionMerge: `${this.baseURL}/xxx`,  // 合并分片的API
  };
}

// 上传前的验证和分片操作
beforeUpload (file) {
  // 如果需要做格式验证，大小检查等，可以在这里添加验证逻辑
  this.fileName = file.name;  // 记录文件名称
  this.fileSize = file.size;  // 记录文件大小
  // 调用分片处理方法
  this.chunkFile(file);
  return false;  // 返回false表示不直接上传，手动上传
},

chunkFile(file) {
  const totalChunks = Math.ceil(file.size / this.chunkSize);  // 计算分片数量
  this.fileChunks = [];  // 清空分片数组
  // 循环切割文件为多个分片
  for (let i = 0; i < totalChunks; i++) {
    const start = i * this.chunkSize;
    const end = Math.min(start + this.chunkSize, file.size);
    const chunk = file.slice(start, end);
    this.fileChunks.push(chunk);  // 将当前分片添加到分片数组
  }
  this.uploading = true;  // 设置上传状态为进行中
  this.uploadNextChunk();  // 上传第一个分片
}

uploadChunk(chunk) {
  const clientId = this.generateClientId();  // 生成唯一的客户端ID
  const formData = new FormData();
  formData.append('file', chunk);  // 添加分片
  formData.append('clientId', clientId);  // 客户端ID
  formData.append('chunkId', this.currentChunkIndex);  // 当前分片索引
  this.axios.post(this.uploadAction, formData, {
    headers: { 'Content-Type': 'multipart/form-data' },
    onUploadProgress: (event) => {
      const hasUploadTotal = this.currentChunkIndex * this.chunkSize;
      const percent = Math.round((hasUploadTotal + event.loaded) * 100 / this.fileSize); // 计算上传进度
      this.uploadProgress = percent;  // 更新进度
    },
  }).then(res => {
    if (res.data.code === 1) {
      this.currentChunkIndex++;  // 上传成功，增加分片索引
      this.uploadNextChunk(clientId);  // 上传下一个分片
    } else {
      this.$message.error('上传失败');
      this.uploading = false;
    }
  }).catch(error => {
    this.$message.error('上传失败');
    this.uploading = false;
  });
}

mergeFile(clientId, fileName) {
  const url = `${this.uploadActionMerge}&clientId=${clientId}&sourceName=${fileName}`;
  this.axios.post(url).then(({ data }) => {
    if (data.code === 1) {
      this.$message.success('上传成功');
    } else {
      this.$message.warning(data.message);
    }
  }).catch((err) => {
    this.$message.error('合并文件出错');
  }).finally(() => {
    // 重置状态
    this.resetUploadState();
  });
}

generateClientId() {
  const timestamp = (+new Date()).toString(32);  // 时间戳转为32进制
  let randomStr = '';
  // 随机生成字符
  for (let i = 0; i < 5; i++) {
    randomStr += Math.floor(Math.random() * 65535).toString(32);
  }
  return timestamp + randomStr;  // 返回客户端ID
}

handleProgress(event) {
  const hasUploadTotal = this.currentChunkIndex * this.chunkSize;
  const percent = Math.round((hasUploadTotal + event.loaded) * 100 / this.fileSize);  // 计算总上传进度
  this.uploadProgress = percent;  // 更新进度条
}

handleSuccess(response) {
  this.$message.success('上传成功');
  this.uploading = false;
}
handleError(error) {
  this.$message.error('上传失败');
  this.uploading = false;
}