xiaoli/peixue-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
feature/quick-assign-2026-02-26
peixue-dev/peidu/Archive/一次性文件/[一次性]小程序图片上传更新清单-2026-01-25.md

4.4 KiB
Raw Permalink Blame History

小程序图片上传更新清单

✅ 已完成

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()

中优先级(管理功能)

  1. 管理师申请

    • 文件: peidu/uniapp/src/user-package/pages/manager/apply.vue
    • 当前接口: /api/upload/image
    • 建议: 使用 uploadImage()

  2. 管理师申请(旧版)

    • 文件: peidu/uniapp/manager-package/pages/manager/apply.vue
    • 当前接口: /api/upload/image
    • 建议: 使用 uploadImage()

  3. 陪伴员资料

    • 文件: peidu/uniapp/src/teacher-package/pages/teacher/profile.vue
    • 当前接口: /api/upload/file
    • 建议: 使用 uploadFile()

低优先级(测试/开发)

  1. 视频上传

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

  2. 反馈创建

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

🔧 更新方法

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

// 在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: 动态导入

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: 选择并上传(一步到位)

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是否正确传递