08-文件、图片、语音消息

1. 文件上传

1.1. 整合minio

图片、视频、语音、文档本质上都是文件,要实现文件消息的推送,首先我们需要一个文件存储服务器。盒子使用Minio作为文件存储服务。

整合Minio并不复杂,基本上遵循三步走战略即可:导包、配置、调接口,网上也有相当多案例和资料,这里不再重复讲述。

盒子内部对Minio的api作了简单的进一步封装:

方法

说明

MinioUtil

bucketExists

查看存储bucket是否存在

MinioUtil

makeBucket

创建存储bucket

MinioUtil

setBucketPublic

设置bucket权限为public

MinioUtil

upload

文件上传

MinioUtil

remove

文件删除

1.2. 文件上传

文件上传编写了两个接口:

方法

说明

FileService

uploadFile

上传普通文件

FileService

uploadImage

上传图片同时返回原图和缩略图

注:除了在全屏展示大图时使用原图,前端其他所有地方都是展示缩略图

1.3. 极速秒传

小伙伴们是否体验过百度云的极速秒传功能,几G大的文件瞬间就上传完成了,神奇的不得了。

其实实现起来也非常简单,只需要在上传前对文件的内容生成md5值,后端拿到这个md5去数据库(上传文件后需要入库)查询是否已经存在相同的文件,如果已存在,则直接返回文件原来的url,然后客户端给文件打上”极速秒传”标签。

不过这个功能还是很有实际意义的,能够有效减少重复文件带来的带宽和服务器磁盘压力。

盒子目前未实现这块功能,建议小伙伴们可以自行实现

2. 文件、图片、语音消息

我们之前已经实现了发送文字消息接口,现在文件上传接口也有了,实现文件消息就简单了。

我们可以仿照文字消息接口,为文件、图片、语音消息分别编写单独的消息接口。

但盒子采用了更简便的方式:

直接复用原先编写好的的文字消息接口,将文件、图片、语音的url以及其他信息以json的格式存储到content字段中。

文件消息流程如下:

816949941d20250831143954

由于不同类型的文件展示要求不同,content中包含的内容也不一样:

类型

content字段

说明

文件

name

文件名

size

文件大小(字节)

url

文件url

图片

originUrl

原图(大图展示时显示)

thumbUrl

缩略图(默认展示)

语音

duration

语音时长(秒)

url

语音文件url

3. 语音采集

前端的语音采集使用了开源插件js-audio-recorder,感兴趣的小伙伴们可以自行去了解。

前端相关代码:

文件

方法

功能

ChatVoice.vue

全部

录音采集

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容