Vue聊天組件允許用戶發送多種類型的信息，包括文字、語音、圖片和文件。本篇文章將重點介紹如何通過Vue聊天發送文件。

在Vue聊天中，需要使用WebRTC技術實現文件傳輸。為了方便，可以使用第三方庫simple-peer來實現WebRTC功能。下面是發送文件的Vue組件代碼。

<template>
<div>
<input type="file" ref="fileInput" @change="sendFile">
<button @click="openFilePicker">選擇文件</button>
</div>
</template>
<script>
import SimplePeer from 'simple-peer'
export default {
data () {
return {
peer: null,
file: null
}
},
methods: {
openFilePicker () {
this.$refs.fileInput.click()
},
async sendFile () {
const file = this.$refs.fileInput.files[0]
this.file = file
const peer = new SimplePeer({
initiator: true,
trickle: false
})
peer.on('signal', data => {
// 將data用Websocket發送給接收方
})
peer.on('connect', () => {
peer.send(file)
})
peer.on('close', () => {
this.peer = null
this.file = null
})
this.peer = peer
}
}
}
</script>

在這個組件中，我們先定義了一個文件輸入框和一個選擇文件按鈕。當用戶選擇了文件后，我們先用simple-peer創建一個WebRTC連接，并將文件發送給對方。在連接建立后，我們使用WebRTC的DataChannel將文件傳輸給對方。當傳輸完成后，我們將WebRTC連接關閉，釋放資源。

需要注意的是，這個例子中使用的是對等連接（P2P）方式，如果需要在多人聊天中發送文件，則需要考慮以何種方式進行網絡傳輸，或者使用第三方庫如Socket.IO進行數據傳輸。

通過Vue聊天組件，我們可以輕松地實現文件傳輸功能，為用戶提供更加豐富的交互和溝通方式。