uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略

一、功能背景与技术选型

在团队协作场景中，群文件共享是核心需求之一。本文将介绍如何基于腾讯云IM+COS，在uniapp中实现：

1. 群内文件上传/下载
2. 文件元数据管理
3. 下载进度追踪
4. 跨平台文件预览

二、技术架构设计

腾讯云通过IM消息通道+COS对象存储的分工模式实现文件共享：

1. 上传文件 2. 返回文件URL 3. 发送FILE消息 4. 转发消息 5. 解析URL 6. 下载文件 客户端 腾讯云COS 腾讯云IM服务 群成员客户端

三、环境准备与核心配置

3.1 开通服务并获取密钥

1. 登录腾讯云控制台
2. 开通服务：
   • 即时通信IM
   • 对象存储COS
3. 创建存储桶并记录：
   • SecretId/SecretKey
   • 存储桶地域（Region）
   • 存储桶名称（Bucket）

3.2 安装SDK包

npm install tim-js-sdk cos-js-sdk-v5 --save

四、核心功能实现步骤

4.1 初始化双SDK

// utils/cloud-services.js
import TIM from 'tim-js-sdk';
import COS from 'cos-js-sdk-v5';

// 初始化IM
export const tim = TIM.create({
  SDKAppID: xxxxxxxx
});

// 初始化COS
export const cos = new COS({
  SecretId: 'xxxxxxxx',
  SecretKey: 'xxxxxxxx'
});

4.2 文件上传实现

// pages/group-chat/group-chat.vue
async function uploadFile(filePath) {
  try {
    // 1. 上传到COS
    const res = await cos.putObject({
      Bucket: 'xxxxxxxx',
      Region: 'xxxxxxxx',
      Key: `group-files/${Date.now()}_${filePath.name}`,
      Body: filePath
    });

    // 2. 构造文件消息
    const fileMessage = tim.createGroupMessage({
      to: currentGroupID,
      conversationType: 'GROUP',
      payload: {
        type: 'FILE',
        file: {
          name: filePath.name,
          size: filePath.size,
          url: res.Location,
          // 自定义扩展字段
          uploader: tim.getUserID(),
          uploadTime: Date.now()
        }
      }
    });

    // 3. 发送消息
    await tim.sendMessage(fileMessage);
    uni.showToast({ title: '文件发送成功' });
  } catch (err) {
    console.error('上传失败:', err);
    handleUploadError(err);
  }
}

4.3 文件下载处理

// 消息监听
tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event) => {
  event.data.forEach(message => {
    if (message.type === 'TIMGroupSystemElem') {
      handleSystemMessage(message);
    } else if (message.type === 'TIMFileElem') {
      handleFileMessage(message);
    }
  });
});

function handleFileMessage(message) {
  const fileInfo = message.payload.file;
  showFileItem({
    ...fileInfo,
    downloadProgress: 0,
    downloading: false
  });
}

// 下载文件
async function downloadFile(fileInfo) {
  try {
    const res = await cos.getObject({
      Bucket: 'xxxxxxxx',
      Region: 'xxxxxxxx',
      Key: fileInfo.url.split('/').pop(),
      onProgress: (progress) => {
        updateProgress(fileInfo.fileId, progress.percent * 100);
      }
    });

    // 处理下载结果
    const blob = new Blob([res.Body]);
    const downloadUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = fileInfo.name;
    a.click();
  } catch (err) {
    console.error('下载失败:', err);
  }
}

4.4 文件列表展示

<template>
  <view class="file-list">
    <view 
      v-for="file in fileList" 
      :key="file.fileId"
      class="file-item"
      @click="handleFileClick(file)"
    >
      <view class="file-info">
        <text class="file-name">{{ file.name }}</text>
        <text class="file-meta">
          {{ formatSize(file.size) }} · 上传者：{{ file.uploader }}
        </text>
      </view>
      <view v-if="file.downloading" class="progress-bar">
        <progress :percent="file.downloadProgress" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    formatSize(size) {
      if (size > 1024 * 1024) {
        return `${(size / (1024 * 1024)).toFixed(1)}MB`;
      }
      return `${(size / 1024).toFixed(1)}KB`;
    },
    handleFileClick(file) {
      if (file.downloading) return;
      
      uni.showActionSheet({
        itemList: ['下载文件', '预览文件'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.downloadFile(file);
          } else {
            this.previewFile(file.url);
          }
        }
      });
    }
  }
}
</script>

<style>
.file-item {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.file-info {
  flex: 1;
  margin-right: 20rpx;
}

.file-name {
  font-size: 32rpx;
  color: #333;
}

.file-meta {
  font-size: 24rpx;
  color: #999;
}

.progress-bar {
  width: 200rpx;
}
</style>

五、关键优化策略

5.1 大文件分片上传

// 使用COS分片上传
async function uploadLargeFile(filePath) {
  const res = await cos.sliceUploadFile({
    Bucket: 'xxxxxxxx',
    Region: 'xxxxxxxx',
    Key: `group-files/${Date.now()}_${filePath.name}`,
    Body: filePath,
    onProgress: (progress) => {
      updateUploadProgress(progress.percent);
    }
  });
  return res;
}

5.2 安全校验机制

// 下载前校验文件权限
async function checkFilePermission(fileInfo) {
  try {
    const res = await axios.get('/api/check-file-permission', {
      params: {
        fileId: fileInfo.fileId,
        userId: tim.getUserID()
      }
    });
    return res.data.allowed;
  } catch (err) {
    console.error('权限校验失败:', err);
    return false;
  }
}

5.3 跨平台预览方案

// 文件预览处理
function previewFile(fileUrl) {
  const extension = fileUrl.split('.').pop().toLowerCase();
  const previewMap = {
    'pdf': '/pdf-viewer',
    'docx': '/doc-viewer',
    'jpg': '/image-viewer'
  };

  if (previewMap[extension]) {
    uni.navigateTo({
      url: `${previewMap[extension]}?url=${encodeURIComponent(fileUrl)}`
    });
  } else {
    uni.showToast({
      title: '暂不支持预览此文件类型',
      icon: 'none'
    });
  }
}

六、生产环境注意事项

1. 存储优化：

   • 设置文件生命周期（自动清理过期文件）
   • 启用CDN加速访问
   • 配置防盗链策略

2. 性能建议：

   // 限制同时上传/下载数
   const MAX_CONCURRENT = 3;
   let activeTasks = 0;
   
   async function safeUpload(file) {
     if (activeTasks >= MAX_CONCURRENT) {
       await new Promise(resolve => setTimeout(resolve, 1000));
       return safeUpload(file);
     }
     activeTasks++;
     try {
       await uploadFile(file);
     } finally {
       activeTasks--;
     }
   }

3. 安全规范：

   • 客户端禁止存储SecretKey
   • 重要操作需服务端校验
   • 文件URL设置过期时间

4. 扩展功能建议：

   // 文件版本管理
   const fileVersions = {
     'doc1': [
       { version: 1.0, uploader: 'userA' },
       { version: 1.1, uploader: 'userB' }
     ]
   };

七、总结

通过腾讯云IM+COS的组合方案，可以构建完整的群文件共享系统。实际开发中需重点关注：

1. 文件传输与消息通知的协同机制
2. 大文件处理与进度管理
3. 安全合规性要求
4. 跨平台兼容性处理