用户反馈，平台内的传输只能发送文件切片数据，导致接收端下载文件没有文件名以及文件后缀。于是我们首先来分析一下平台的发送机制，发送文件前先发送条消息到接收端：
let filesInfo = {
name: file.name, //文件名
size: file.size, //文件大小，判断文件切片是否有丢失
}
sendChannel.send(JSON.stringify(filesInfo))
发送文件前的数据与文本通信的数据格式一样。在接收端添加判断条件，将发送文件前的数据保存起来，代码如下：
if (typeof event.data === 'string' ? true : false){
let msgData = JSON.parse(event.data)
if (msgData.type === 'message'){
this.msgData.push(JSON.parse(event.data))
this.getTipType('msg')
}else{
// 获取文件第一条信息
this.filesData.push(JSON.parse(event.data))
}
}
if (typeof event.data !== 'string' ? true : false){
this.receiveBuffer.push(event.data)//将接收到的数据添加到接收缓存里
this.receivedSize += event.data.byteLength; //设置当前接收文件的大小
let filesInfo = JSON.parse(JSON.stringify(this.filesData))
if (this.receivedSize === filesInfo[0].size){
const received = new Blob(this.receiveBuffer)// 生成Blob文件
this.receiveBuffer = [] // 将缓存数据置空
this.filesData = []
this.downData = { // 添加a标签信息
url: URL.createObjectURL(received),
name: filesInfo[0].name,
size: filesInfo[0].size,
}
this.receivedSize = 0
this.receiveState = true
this.fileTip = true
}
this.getTipType('file')
}
}
如此修改之后，文件、文本传输则可以互不影响。
接收端：
发送端：
下载的文件如下，正常显示文件名以及文件后缀：
