<!-- Vue3 示例 -->
<template>
  <input type="file" @change="handleFileChange" />
  <button @click="upload">上傳</button>
</template>

<script setup>
const handleFileChange = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  
  const formData = new FormData();
  formData.append('file', file);
  formData.append('filename', file.name);
  
  fetch('/api/upload', {
    method: 'POST',
    body: formData
  }).then(r => r.json()).then(console.log);
};
</script>

// 使用 XMLHttpRequest 監(jiān)聽進度
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  if (e.lengthComputable) {
    const percent = Math.round((e.loaded / e.total) * 100);
    console.log(`上傳進度: ${percent}%`);
    // 更新UI進度條
    setProgress(percent);
  }
};

xhr.open('POST', '/api/upload');
xhr.send(formData);

function useUploadProgress() {
  const [progress, setProgress] = useState(0);
  
  const upload = (file) => {
    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) {
        setProgress(Math.round((e.loaded / e.total) * 100));
      }
    };
    // ...其他邏輯
  };
  
  return { progress, upload };
}

// 允許選擇多個文件
<input type="file" multiple>

// 處理多個文件
const files = e.target.files;
const formData = new FormData();
Array.from(files).forEach(file => {
  formData.append('files[]', file); 
});

// 圖片預(yù)覽
function previewImage(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    document.getElementById('preview').src = e.target.result;
  };
  reader.readAsDataURL(file);
}

// PDF預(yù)覽(使用pdf.js)
PDFJS.getDocument(URL.createObjectURL(file)).promise
  .then(pdf => pdf.getPage(1))
  .then(page => {
    // 渲染到canvas
  });

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
  const percent = Math.round((e.loaded / e.total) * 100);
  progressBar.style.width = `${percent}%`;
};
xhr.open('POST', '/upload');
xhr.send(formData);

<template>
  <div 
    @dragover.prevent 
    @drop="handleDrop"
    class="drop-zone"
    :class="{ active: isDragover }"
  >
    拖拽文件到此處
  </div>
</template>

<script setup>
const isDragover = ref(false);

const handleDrop = (e) => {
  e.preventDefault();
  isDragover.value = false;
  const files = e.dataTransfer.files;
  if (files.length) upload(files[0]);
};

const handleDragover = (e) => {
  e.preventDefault();
  isDragover.value = true;
};
</script>

<style>
.drop-zone.active { border: 2px dashed #1890ff; }
</style>

// 文件分片
const createFileChunk = (file, size = 1024 * 1024) => {
  const chunks = [];
  let cur = 0;
  while (cur < file.size) {
    chunks.push({ file: file.slice(cur, cur + size) });
    cur += size;
  }
  return chunks;
};

// 并行上傳分片
const uploadChunks = async (chunks) => {
  const requests = chunks.map((chunk, index) => {
    const formData = new FormData();
    formData.append('chunk', chunk.file);
    formData.append('hash', `${fileHash}-${index}`);
    return fetch('/api/upload-chunk', { method: 'POST', body: formData });
  });
  await Promise.all(requests); // 并行上傳
  await mergeRequest(); // 通知服務(wù)端合并
};

const uploadedChunks = await getUploadedChunks(fileHash); // 從服務(wù)端獲取

const chunksToUpload = chunks.filter((_, index) => 
  !uploadedChunks.includes(index)
);

await uploadChunks(chunksToUpload);

localStorage.setItem(`upload-${fileHash}`, JSON.stringify(uploadedChunks));

// 1. 類型校驗
const acceptTypes = ['image/jpeg', 'image/png', 'application/pdf'];
if (!acceptTypes.includes(file.type)) {
  throw new Error('不支持的文件類型');
}

// 2. 大小校驗（最大100MB）
if (file.size > 100 * 1024 * 1024) {
  throw new Error('文件過大');
}

// 3. 內(nèi)容校驗（讀取文件頭）
const buffer = await file.arrayBuffer();
const header = Array.from(new Uint8Array(buffer.slice(0, 4)))
  .map(b => b.toString(16).padStart(2, '0'))
  .join(' ');

// JPEG: ff d8 ff e0, PNG: 89 50 4e 47
if (!['ffd8ffe0', '89504e47'].includes(header)) {
  throw new Error('文件內(nèi)容非法');
}