EasyFK-OSS 文件存储服务

dromara:
  x-file-storage:
    default-platform: minio  # 切换为 aliyun、tencent 等即可

dependencies {
    implementation("com.mcst:easyfk-oss")
}

dromara:
  x-file-storage:
    default-platform: minio
    thumbnail-suffix: ".min.jpg"
    minio:
      - platform: minio
        enable-storage: true
        access-key: your-access-key
        secret-key: your-secret-key
        end-point: http://your-minio-server:9000
        bucket-name: your-bucket
        domain: https://your-domain/bucket/
        base-path: upload/

spring:
  data:
    redis:
      host: 127.0.0.1
      port: 6379
      password: your-password
      database: 0

easyfk:
  config:
    oss:
      multipart:
        enabled: true  # 启用分片上传

./gradlew bootRun

server:
  port: 9011

spring:
  servlet:
    multipart:
      max-file-size: 1000MB
      max-request-size: 1000MB
  data:
    redis:
      host: 127.0.0.1
      port: 6379
      database: 0

easyfk:
  config:
    oss:
      upload:
        thumbnail: true
        thumbnail-width: 200
        thumbnail-height: 200
        compress: true
        scale: 0.8
        quality: 0.7
      multipart:
        enabled: true
        chunk-size: 5242880
        max-file-size: 10737418240
        task-expire-hours: 24
        instant-upload-enabled: true
        instant-upload-cache-days: 30

POST /oss/file/upload
Content-Type: multipart/form-data

{
  "code": 200,
  "message": "success",
  "data": "https://oss.example.com/bucket/IMAGE/abc123.jpg"
}

POST /oss/file/upload/image
Content-Type: multipart/form-data

POST /oss/file/upload/video
Content-Type: multipart/form-data

POST /oss/file/multipart/init
Content-Type: application/json

{
  "fileName": "large-video.mp4",
  "fileSize": 104857600,
  "fileMd5": "d41d8cd98f00b204e9800998ecf8427e",
  "chunkSize": 5242880,
  "bizName": "video"
}

{
  "code": 200,
  "message": "success",
  "data": {
    "uploadId": "abc123xyz",
    "chunkSize": 5242880,
    "totalChunks": 20,
    "uploadedChunks": [],
    "instantUpload": false
  }
}

{
  "code": 200,
  "message": "success",
  "data": {
    "instantUpload": true,
    "fileUrl": "https://oss.example.com/bucket/VIDEO/existing-file.mp4"
  }
}

GET /oss/file/multipart/status/{uploadId}

{
  "code": 200,
  "message": "success",
  "data": {
    "uploadId": "abc123xyz",
    "chunkSize": 5242880,
    "totalChunks": 20,
    "uploadedChunks": [1, 2, 3, 5, 6],
    "instantUpload": false
  }
}

POST /oss/file/multipart/chunk
Content-Type: multipart/form-data

{
  "code": 200,
  "message": "success",
  "data": true
}

POST /oss/file/multipart/complete/{uploadId}

{
  "code": 200,
  "message": "success",
  "data": "https://oss.example.com/bucket/VIDEO/abc123.mp4"
}

DELETE /oss/file/multipart/abort/{uploadId}

{
  "code": 200,
  "message": "success"
}

async function uploadFile(file, bizName = '') {
  const formData = new FormData();
  formData.append('file', file);
  if (bizName) {
    formData.append('bizName', bizName);
  }

  const response = await fetch('/oss/file/upload', {
    method: 'POST',
    body: formData
  });

  const result = await response.json();
  if (result.code === 200) {
    console.log('上传成功:', result.data);
    return result.data;
  } else {
    throw new Error(result.message);
  }
}

// 使用示例
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const url = await uploadFile(file, 'avatar');
  console.log('文件 URL:', url);
});

class ChunkUploader {
  constructor(options = {}) {
    this.chunkSize = options.chunkSize || 5 * 1024 * 1024; // 5MB
    this.baseUrl = options.baseUrl || '';
    this.onProgress = options.onProgress || (() => {});
  }

  // 计算文件 MD5
  async calculateMD5(file) {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        const spark = new SparkMD5.ArrayBuffer();
        spark.append(e.target.result);
        resolve(spark.end());
      };
      reader.readAsArrayBuffer(file);
    });
  }

  // 初始化上传
  async initUpload(file, bizName = '') {
    const fileMd5 = await this.calculateMD5(file);

    const response = await fetch(`${this.baseUrl}/oss/file/multipart/init`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        fileName: file.name,
        fileSize: file.size,
        fileMd5: fileMd5,
        chunkSize: this.chunkSize,
        bizName: bizName
      })
    });

    const result = await response.json();
    if (result.code !== 200) {
      throw new Error(result.message);
    }
    return result.data;
  }

  // 上传单个分片
  async uploadChunk(uploadId, chunkIndex, chunk) {
    const formData = new FormData();
    formData.append('uploadId', uploadId);
    formData.append('chunkIndex', chunkIndex);
    formData.append('file', chunk);

    const response = await fetch(`${this.baseUrl}/oss/file/multipart/chunk`, {
      method: 'POST',
      body: formData
    });

    const result = await response.json();
    if (result.code !== 200) {
      throw new Error(result.message);
    }
    return result.data;
  }

  // 完成上传
  async completeUpload(uploadId) {
    const response = await fetch(`${this.baseUrl}/oss/file/multipart/complete/${uploadId}`, {
      method: 'POST'
    });

    const result = await response.json();
    if (result.code !== 200) {
      throw new Error(result.message);
    }
    return result.data;
  }

  // 查询上传状态（用于断点续传）
  async getUploadStatus(uploadId) {
    const response = await fetch(`${this.baseUrl}/oss/file/multipart/status/${uploadId}`);
    const result = await response.json();
    if (result.code !== 200) {
      throw new Error(result.message);
    }
    return result.data;
  }

  // 主上传方法
  async upload(file, bizName = '') {
    // 1. 初始化上传
    const initResult = await this.initUpload(file, bizName);

    // 2. 检查是否秒传成功
    if (initResult.instantUpload) {
      console.log('秒传成功');
      this.onProgress(100, file.size, file.size);
      return initResult.fileUrl;
    }

    const { uploadId, totalChunks, uploadedChunks } = initResult;
    const uploadedSet = new Set(uploadedChunks);

    // 3. 上传每个分片
    let uploadedCount = uploadedChunks.length;

    for (let i = 1; i <= totalChunks; i++) {
      if (uploadedSet.has(i)) {
        continue;
      }

      const start = (i - 1) * this.chunkSize;
      const end = Math.min(start + this.chunkSize, file.size);
      const chunk = file.slice(start, end);

      await this.uploadChunk(uploadId, i, chunk);
      uploadedCount++;

      const progress = Math.round((uploadedCount / totalChunks) * 100);
      this.onProgress(progress, uploadedCount * this.chunkSize, file.size);
    }

    // 4. 完成上传
    const fileUrl = await this.completeUpload(uploadId);
    this.onProgress(100, file.size, file.size);

    return fileUrl;
  }
}

// 使用示例
const uploader = new ChunkUploader({
  chunkSize: 5 * 1024 * 1024,
  onProgress: (percent, uploaded, total) => {
    console.log(`上传进度: ${percent}% (${uploaded}/${total})`);
  }
});

const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  try {
    const url = await uploader.upload(file, 'video');
    console.log('上传成功:', url);
  } catch (error) {
    console.error('上传失败:', error.message);
  }
});

<template>
  <div class="upload-container">
    <input
      type="file"
      ref="fileInput"
      @change="handleFileChange"
      :accept="accept"
    />

    <div v-if="uploading" class="progress">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
      <span>{{ progress }}%</span>
    </div>

    <div v-if="fileUrl" class="result">
      上传成功: <a :href="fileUrl" target="_blank">{{ fileUrl }}</a>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SparkMD5 from 'spark-md5';

const props = defineProps({
  accept: { type: String, default: '*/*' },
  bizName: { type: String, default: '' },
  chunkSize: { type: Number, default: 5 * 1024 * 1024 }
});

const emit = defineEmits(['success', 'error']);

const fileInput = ref(null);
const uploading = ref(false);
const progress = ref(0);
const fileUrl = ref('');

async function calculateMD5(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const spark = new SparkMD5.ArrayBuffer();
      spark.append(e.target.result);
      resolve(spark.end());
    };
    reader.readAsArrayBuffer(file);
  });
}

async function handleFileChange(e) {
  const file = e.target.files[0];
  if (!file) return;

  uploading.value = true;
  progress.value = 0;
  fileUrl.value = '';

  try {
    if (file.size <= props.chunkSize) {
      const url = await simpleUpload(file);
      fileUrl.value = url;
      emit('success', url);
    } else {
      const url = await chunkUpload(file);
      fileUrl.value = url;
      emit('success', url);
    }
  } catch (error) {
    emit('error', error.message);
  } finally {
    uploading.value = false;
  }
}

async function simpleUpload(file) {
  const formData = new FormData();
  formData.append('file', file);
  if (props.bizName) {
    formData.append('bizName', props.bizName);
  }

  const response = await fetch('/oss/file/upload', {
    method: 'POST',
    body: formData
  });

  const result = await response.json();
  if (result.code !== 200) throw new Error(result.message);

  progress.value = 100;
  return result.data;
}

async function chunkUpload(file) {
  const fileMd5 = await calculateMD5(file);

  const initRes = await fetch('/oss/file/multipart/init', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      fileName: file.name,
      fileSize: file.size,
      fileMd5,
      chunkSize: props.chunkSize,
      bizName: props.bizName
    })
  });

  const initResult = await initRes.json();
  if (initResult.code !== 200) throw new Error(initResult.message);

  if (initResult.data.instantUpload) {
    progress.value = 100;
    return initResult.data.fileUrl;
  }

  const { uploadId, totalChunks, uploadedChunks } = initResult.data;
  const uploadedSet = new Set(uploadedChunks);
  let completed = uploadedChunks.length;

  for (let i = 1; i <= totalChunks; i++) {
    if (uploadedSet.has(i)) continue;

    const start = (i - 1) * props.chunkSize;
    const end = Math.min(start + props.chunkSize, file.size);
    const chunk = file.slice(start, end);

    const formData = new FormData();
    formData.append('uploadId', uploadId);
    formData.append('chunkIndex', i);
    formData.append('file', chunk);

    const res = await fetch('/oss/file/multipart/chunk', {
      method: 'POST',
      body: formData
    });

    const result = await res.json();
    if (result.code !== 200) throw new Error(result.message);

    completed++;
    progress.value = Math.round((completed / totalChunks) * 100);
  }

  const completeRes = await fetch(`/oss/file/multipart/complete/${uploadId}`, {
    method: 'POST'
  });

  const completeResult = await completeRes.json();
  if (completeResult.code !== 200) throw new Error(completeResult.message);

  return completeResult.data;
}
</script>

<style scoped>
.progress {
  margin-top: 10px;
  background: #eee;
  border-radius: 4px;
  height: 20px;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: #4caf50;
  border-radius: 4px;
  transition: width 0.3s;
}
.progress span {
  position: absolute;
  right: 10px;
  top: 0;
  line-height: 20px;
}
</style>

spring:
  config:
    import:
      - "file:config/application-aliyun.yml"  # 切换为阿里云

easyfk.config.oss.multipart:
  instant-upload-enabled: true

spring:
  servlet:
    multipart:
      max-file-size: 1000MB
      max-request-size: 1000MB

client_max_body_size 1000M;
proxy_read_timeout 600s;
proxy_send_timeout 600s;

spring:
  data:
    redis:
      host: your-redis-host
      port: 6379

easyfk.config.oss.multipart:
  task-expire-hours: 48  # 改为 48 小时