yss-project/docs/wework-drag-drop-guide.md

企业微信拖拽图片功能使用指南

功能说明

在"确认需求"阶段的AI设计分析区域，现已支持从企业微信群聊中直接拖拽图片到上传区域。

使用方法

1. 拖拽上传

1. 打开项目详情 → 进入"确认需求"阶段
2. 找到"AI设计分析"卡片
3. 从企业微信群聊中选择图片
4. 直接拖拽到"上传参考文件"区域
5. 系统会自动处理并显示预览

2. 支持的格式

• 图片格式: JPG, JPEG, PNG, GIF, WebP, BMP, TIFF
• 单张图片大小: 最大 50MB（超过5MB会自动压缩）
• 数量限制: 最多同时上传 20 张图片

3. 多张图片上传

• 可以一次拖拽多张图片
• 可以多次拖拽，逐步添加图片
• 每张图片都会显示文件名和大小

数据结构日志

当您拖拽图片时，浏览器控制台会自动打印详细的数据结构信息：

打开控制台

1. 按 F12 或 Ctrl + Shift + I 打开开发者工具
2. 切换到"Console"（控制台）标签页
3. 执行拖拽操作

日志示例

🎯 ========== 拖拽事件触发 ==========
📋 事件类型: drop
📋 DataTransfer对象: DataTransfer {...}

📦 DataTransfer详细信息:
  - dropEffect: none
  - effectAllowed: all
  - files数量: 2
  - items数量: 2
  - types: ['Files']

📄 Items详细信息:
  Item 1: {kind: 'file', type: 'image/jpeg', webkitGetAsEntry: '支持'}
  Item 2: {kind: 'file', type: 'image/png', webkitGetAsEntry: '支持'}

📁 Files详细信息:
  File 1: {
    name: '客厅效果图.jpg',
    type: 'image/jpeg',
    size: '1024.50 KB',
    lastModified: '2025/12/2 23:45:30'
  }
  File 2: {
    name: '卧室效果图.png',
    type: 'image/png',
    size: '2048.75 KB',
    lastModified: '2025/12/2 23:45:35'
  }

✅ 通过标准files API获取到文件，共 2 个
📤 准备处理文件: 客厅效果图.jpg, 大小: 1.00MB
🔄 将图片转换为base64格式...
✅ 图片已转换为base64，大小: 1365.33KB
💾 已保存图片: 客厅效果图.jpg
📤 准备处理文件: 卧室效果图.png, 大小: 2.00MB
🔄 将图片转换为base64格式...
✅ 图片已转换为base64，大小: 2731.67KB
💾 已保存图片: 卧室效果图.png
✅ 已处理2个文件
🎯 所有图片已转为base64，可直接进行AI分析

数据结构说明

DataTransfer 对象

{
  dropEffect: string,        // 拖放效果 (none/copy/move/link)
  effectAllowed: string,     // 允许的效果 (all/copy/move/link)
  files: FileList,          // 文件列表
  items: DataTransferItemList, // 数据项列表
  types: string[]           // 数据类型数组
}

DataTransferItem 对象

{
  kind: 'file' | 'string',  // 数据类型
  type: string,             // MIME类型 (如 'image/jpeg')
  webkitGetAsEntry: boolean // 是否支持目录拖拽
}

File 对象

{
  name: string,             // 文件名
  type: string,             // MIME类型
  size: number,             // 文件大小（字节）
  lastModified: number      // 最后修改时间戳
}

上传后的文件记录

{
  url: string,              // base64数据URL
  name: string,             // 文件名
  type: string,             // MIME类型
  size: number,             // 原始文件大小
  extension: string,        // 文件扩展名 (jpg/png/...)
  isBase64: true            // 标记为base64格式
}

企业微信特殊处理

系统会尝试两种方式获取文件：

方式1: 标准 files API

const files = event.dataTransfer.files;

方式2: items API（企业微信备用方案）

const items = event.dataTransfer.items;
for (let i = 0; i < items.length; i++) {
  if (items[i].kind === 'file') {
    const file = items[i].getAsFile();
  }
}

常见问题

Q: 拖拽后没有反应？

A: 请检查控制台日志：

• 如果看到"未能从拖拽事件中提取到文件"，请尝试点击上传按钮
• 确认拖拽的是图片文件而非文件夹

Q: 为什么有些图片拖拽失败？

A: 可能的原因：

• 文件格式不支持（只支持图片格式）
• 文件超过50MB限制
• 网络连接问题

Q: 如何查看详细的错误信息？

A:

1. 打开浏览器控制台（F12）
2. 查看红色错误信息
3. 截图控制台日志，联系技术支持

技术实现

文件处理流程

拖拽事件触发
  ↓
提取文件对象（files/items API）
  ↓
验证文件格式和大小
  ↓
大文件自动压缩（>5MB）
  ↓
转换为base64格式
  ↓
保存到内存数组
  ↓
显示预览
  ↓
可进行AI分析

压缩策略

• 5MB以下: 直接使用
• 5MB-50MB: 自动压缩（质量0.8，最大宽度3000px）
• 50MB以上: 拒绝上传，提示用户使用专业工具压缩

相关文件

• 组件: stage-requirements.component.ts
• 模板: stage-requirements.component.html
• 服务: design-analysis-ai.service.ts

更新日志

2025-12-02

• ✅ 支持企业微信拖拽图片
• ✅ 添加详细的数据结构日志
• ✅ 支持多张图片同时拖拽
• ✅ 自动压缩大文件
• ✅ 实时显示上传进度