peixue-dev/peidu/Archive/一次性文件/[一次性]小程序图片上传更新清单-2026-01-25.md

# 小程序图片上传更新清单

## ✅ 已完成

### 1. 创建统一上传工具
- **文件**: `peidu/uniapp/src/utils/upload.js`
- **功能**: 
  - `uploadImage()` - 上传单张图片
  - `uploadImages()` - 批量上传图片
  - `chooseAndUploadImage()` - 选择并上传图片
  - `uploadVideo()` - 上传视频
  - `uploadFile()` - 上传文件

### 2. 更新签到页面
- **文件**: `peidu/uniapp/src/teacher-package/pages/teacher/checkin.vue`
- **修改**: 使用新的 `uploadImage()` 方法

## 📋 待更新文件列表

以下文件仍在使用旧的上传接口,建议统一更新为使用 `upload.js`:

### 高优先级(核心功能)

1. **签退页面**
   - 文件: `peidu/uniapp/src/teacher-package/pages/teacher/checkout.vue`
   - 当前接口: `/api/upload/image`
   - 建议: 使用 `uploadImage()`

2. **成长记录创建**
   - 文件: `peidu/uniapp/src/teacher-package/pages/teacher/record-create.vue`
   - 当前接口: `/api/upload/image`, `/api/upload/video`, `/api/upload/pdf`
   - 建议: 使用 `uploadImage()`, `uploadVideo()`, `uploadFile()`

3. **每日记录**
   - 文件: `peidu/uniapp/src/activity-package/pages/growth/daily-record.vue`
   - 当前接口: `/api/growth-record/upload`
   - 建议: 使用 `uploadImage()`

### 中优先级(管理功能)

4. **管理师申请**
   - 文件: `peidu/uniapp/src/user-package/pages/manager/apply.vue`
   - 当前接口: `/api/upload/image`
   - 建议: 使用 `uploadImage()`

5. **管理师申请(旧版)**
   - 文件: `peidu/uniapp/manager-package/pages/manager/apply.vue`
   - 当前接口: `/api/upload/image`
   - 建议: 使用 `uploadImage()`

6. **陪伴员资料**
   - 文件: `peidu/uniapp/src/teacher-package/pages/teacher/profile.vue`
   - 当前接口: `/api/upload/file`
   - 建议: 使用 `uploadFile()`

### 低优先级(测试/开发)

7. **视频上传**
   - 文件: `peidu/uniapp/src/teacher-package/pages/video/upload.vue`
   - 当前接口: `http://192.168.1.50:8080/api/teacher/video/upload` (硬编码IP)
   - 建议: 使用 `uploadVideo()` 并移除硬编码IP

8. **反馈创建**
   - 文件: `peidu/uniapp/common-package/pages/feedback/create.vue`
   - 当前接口: `http://192.168.1.50:8080/api/upload/image` (硬编码IP)
   - 建议: 使用 `uploadImage()` 并移除硬编码IP

## 🔧 更新方法

### 方法1: 导入并使用(推荐)

```javascript
// 在script标签中导入
import { uploadImage, uploadImages, chooseAndUploadImage } from '@/utils/upload.js'

// 使用
async uploadPhoto(filePath) {
  try {
    const result = await uploadImage(filePath)
    return result.fileUrl
  } catch (error) {
    console.error('上传失败:', error)
    throw error
  }
}
```

### 方法2: 动态导入

```javascript
async uploadPhoto(filePath) {
  const { uploadImage } = require('@/utils/upload.js')
  try {
    const result = await uploadImage(filePath)
    return result.fileUrl
  } catch (error) {
    console.error('上传失败:', error)
    throw error
  }
}
```

### 方法3: 选择并上传(一步到位)

```javascript
import { chooseAndUploadImage } from '@/utils/upload.js'

async selectAndUpload() {
  try {
    const results = await chooseAndUploadImage({
      count: 1,
      onProgress: (progress) => {
        console.log('上传进度:', progress + '%')
      }
    })
    const imageUrl = results[0].fileUrl
    console.log('图片URL:', imageUrl)
  } catch (error) {
    console.error('上传失败:', error)
  }
}
```

## 📝 注意事项

1. **统一接口**: 所有上传都使用 `/api/file/upload`
2. **自动适配**: 后端会根据配置自动选择本地保存或远程上传
3. **返回格式**: 统一返回 `{ fileName, fileUrl, fileSize, fileType }`
4. **错误处理**: 统一的错误处理和日志记录
5. **进度监听**: 支持上传进度回调

## ✅ 更新检查清单

更新每个文件后,请检查:
- [ ] 导入了 `upload.js` 工具
- [ ] 移除了旧的 `uni.uploadFile` 代码
- [ ] 移除了硬编码的IP地址
- [ ] 测试上传功能正常
- [ ] 检查返回的URL格式正确

## 🚀 批量更新建议

如果需要批量更新,可以按以下顺序:
1. 先更新高优先级文件(核心功能)
2. 测试确认无问题
3. 再更新中低优先级文件
4. 最后移除旧的上传接口(如果有)

## 📞 技术支持

如有问题,请检查:
1. `upload.js` 文件是否正确导入
2. `request.js` 中的 `baseURL` 是否正确
3. 后端 `/api/file/upload` 接口是否正常
4. Token是否正确传递