如何用BOM实现页面的拖拽上传？

<div id="drop-area">
  将文件拖拽到这里
</div>
<div id="file-list"></div>

<style>
#drop-area {
  border: 2px dashed #ccc;
  padding: 50px;
  text-align: center;
  cursor: pointer;
}
#drop-area.highlight {
  border-color: green;
  background-color: #f0f0f0;
}
</style>

const dropArea = document.getElementById('drop-area');
const fileList = document.getElementById('file-list');

// 阻止默认行为
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}

// 高亮显示拖拽区域
['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})

['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})

function highlight(e) {
  dropArea.classList.add('highlight')
}

function unhighlight(e) {
  dropArea.classList.remove('highlight')
}

// 处理文件上传
dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
  let dt = e.dataTransfer
  let files = dt.files

  handleFiles(files)
}

function handleFiles(files) {
  files = [...files]
  files.forEach(uploadFile)
}

function uploadFile(file) {
  const reader = new FileReader();

  reader.onload = function(e) {
    // e.target.result 包含文件的内容
    displayFile(file.name, e.target.result);
  }

  reader.readAsDataURL(file); // 或者 readAsText, readAsBinaryString, readAsArrayBuffer
}

function displayFile(name, content) {
    const fileDiv = document.createElement('div');
    fileDiv.textContent = `File: ${name}`;

    const img = document.createElement('img');
    img.src = content;
    img.style.maxWidth = '200px';

    fileDiv.appendChild(img);
    fileList.appendChild(fileDiv);
}

function uploadFile(file) {
  const chunkSize = 1024 * 1024; // 1MB
  let offset = 0;
  let chunkIndex = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    uploadChunk(chunk, chunkIndex, file.name);
    offset += chunkSize;
    chunkIndex++;
  }
}

function uploadChunk(chunk, chunkIndex, fileName) {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('chunkIndex', chunkIndex);
  formData.append('fileName', fileName);

  fetch('/upload-chunk', { // 假设服务端接口为 /upload-chunk
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Chunk uploaded:', data);
    // TODO: 处理上传成功后的逻辑，例如校验所有分片是否上传完成
  })
  .catch(error => {
    console.error('Error uploading chunk:', error);
    // TODO: 处理上传失败的逻辑，例如重试上传
  });
}

function handleFiles(files) {
  files = [...files];
  files.forEach(file => {
    if (!isFileTypeSupported(file.type)) {
      alert('不支持的文件类型：' + file.name);
      return;
    }

    if (!isFileWithinSizeLimit(file.size)) {
      alert('文件大小超出限制：' + file.name);
      return;
    }

    uploadFile(file);
  });
}

function isFileTypeSupported(type) {
  const supportedTypes = ['image/jpeg', 'image/png', 'application/pdf']; // 示例
  return supportedTypes.includes(type);
}

function isFileWithinSizeLimit(size) {
  const maxSize = 10 * 1024 * 1024; // 10MB
  return size <= maxSize;
}