依图库拖拽上传模块

拖拽上传模块在现代图片管理工具中扮演了重要角色，为用户提供了便捷的操作体验，同时在技术实现上也蕴含了诸多细节与挑战。从事件监听到文件验证再到上传进度展示，每一个步骤都有其独特的思路与实现逻辑。

拖拽事件的监听与处理

首先，我们需要为拖拽区域绑定 @dragover 和 @drop 事件，这不仅能够捕获用户的拖放动作，还需要通过 preventDefault 来阻止默认行为。这样可以避免浏览器对文件的直接下载或跳转行为。

在 @drop 回调中，通过 event.dataTransfer.files 获取用户拖入的文件列表。这里，我们需要将文件转换为数组以便进一步处理。这一步是整个交互的起点，也是验证和筛选的关键环节。

async handleDrop(event) {
  const files = Array.from(event.dataTransfer.files);
  files.forEach(async (file, index) => {
    if (file.type.startsWith("image/")) {
      // 后续处理逻辑
    }
  });
}

文件的验证与上传

拖放的文件可能并非全是图片，因此在实际上传之前，需要对文件的 type 进行检查，确保其格式为图像文件。这一步通过 file.type.startsWith("image/") 轻松实现。

在文件验证通过后，我们构造一个 FormData 对象，用于上传图片的封装。FormData 是现代浏览器中上传二进制数据的最佳选择。每一个文件都会附带额外的元数据，比如所属的图库 ID、名称等。

上传的关键在于使用 axios 发送请求，同时通过 onUploadProgress 回调实时获取上传进度。这不仅提升了用户的体验，还能使进度条的更新更加流畅和精准。

const formData = new FormData();
formData.append("file", file);
formData.append("gallery_id", this.galleryId.id);
formData.append("gallery", this.galleryId.name);

await axios.post("/upload-image", formData, {
  headers: { "Content-Type": "multipart/form-data" },
  onUploadProgress: (progressEvent) => {
    const percentage = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    newImage.uploadProgress.percentage = percentage;
  },
});

动态上传进度展示

在上传文件时，用户最关心的莫过于上传是否顺利及进度如何。因此，为每个正在上传的文件创建一个临时的图片对象显得尤为重要。这些对象不仅展示占位符图片，还包含动态更新的进度条。

我们通过一个数据绑定的对象（如 uploadProgress）来实时更新图片的上传状态。每当 onUploadProgress 回调被触发，进度条的宽度和文本会同步更新，为用户提供直观反馈。

<div v-else class="upload-progress">
  <div class="progress-bar" :style="{ width: image.uploadProgress.percentage + '%' }"></div>
  <span>{{ image.uploadProgress.percentage }}%</span>
</div>

同时，当上传完成后，临时对象会被实际的服务器响应替换，并从进度条模式切换到普通展示模式。这样，用户可以立即看到上传成功的图片，而不需要刷新页面。