之前剛好做過類似的東西，當時的流程大概是這樣
1.文字訊息定義特殊的開頭，收到時代表接下來會接收一段 base64 字串
比如以 :!json=> {"type":"img","arrayLength":"30", "id":"abc"} 來定義
收到 !json=> 開頭的訊息時就不顯示而是跑進別的 function 做處理
它定義接下來會接受一段 img 的 base64
會切成 30 段長度，這張 img 的 id 叫做 abc
2.用 File API 從客戶端讀入本機圖片後轉成 base64 字串
按照你每封訊息的長度限制去切文字，最後可能變成一個長度 30 的陣列
3.用特殊開頭來傳，除了第一段寫的部分外，再另外加上
"index": 1, //數字，該文字是陣列的第幾個
"data": "8D2VcX9f......." //被拆開來的 base64 字串
收到時你會知道有一個 img 長度會有 30 筆，圖片 id 叫 abc
現在是收第 index 段的 data
然後不論先送出的訊息是否先收到，總之最後就會收到 30 個訊息
確認陣列長度 30 都填滿後就可以把它 join 起來，變成原本的 base64 字串