如何使用 SignalR 发送图像？

Question

我构建了一个应用程序，前端为 angular 10，后端为 .net core 5，人们可以通过这个应用程序实时聊天和发送图像。 我可以使用 signalR 实现聊天功能，但我不知道如何发送图片，请给我一个强有力的参考来帮助我做到这一点

Answer 1

一种解决方案是使用 signalR 将文件作为 base64 字符串发送。

您可以使用 javascript FileReader class 将文件转换为客户端的等效 base64。 例如

const toBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
});

async function Main() {
   const file = document.querySelector('#myfile').files[0];
   console.log(await toBase64(file));
}

Main();

然后，您可以为上传的文件创建一个 class 服务器端，例如：

public class SignalRFileUpload {
    public string FileName { get; set; }
    public string ContentType { get; set; }
    public string FileContent { get; set; }
}

然后，您可以像发送任何其他数据一样使用 signalR 发送文件。

然后您可以将它们作为字符串存储在服务器上，或者使用以下方法将它们转换为 byte[]：

Convert.FromBase64String(FileContent);

对于几 MB 左右的较小图像，此解决方案应该没问题。 任何比这更大的，我相信它会成为问题。 我以前从未尝试过，所以我不能确定。