通过 Websocket 连接将文件上传到 Django Channels（来自本机应用程序）

Question

我想允许用户从应用程序上传文件，它必须通过 WebSocket 连接，我很难找到解决方案，目前我找到的所有解决方案都需要设置 Content-Type header 并且对于 WS 连接我找不到这样做

上传文件的JavaScript代码：

const fd = new FormData();
fd.append('uri', uri)

// I get the URI from user gallery expo-image-picker
// The URI looks like this:  file:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540zeyadshaban%252Forgachat/ImagePicker/394f4262-184d-4adc-9a51-db32afcb86a2.png

JSON.stringify({
        fd,
        type: 'image',
    })

在后端（consumers.py）我试图直接保存文件，但它一直抛出错误

elif json_data.get('type') == 'image':
     my_model_instance.image = json_data.get('fd')

await sync_to_async(my_model_instance.save)()

当我在终端中输入 json_data.get('fd') 时，我得到了这个

>> json_data.get('fd')
{'_parts': [[...]]}

Answer 1

我强烈建议您不要通过 websocket 连接上传大量数据，最好创建另一个辅助 http 端点并将其用于文件上传。所用数据的 URL 编码可以在 JSON 中内联，这将使传输的数据量成倍增加。

如果你坚持使用WS上传数据，那么你应该使用二进制框架而不是JS框架。要包含内容类型，我建议您通过创建一个专用的 WS 端点来完成此操作，该端点仅用于上传数据，当您解除与它的连接时，您首先发送带有信息（如内容类型）的 s JSON 帧，然后发送很多带有数据的二进制帧。

通过 Websocket 连接将文件上传到 Django Channels（来自本机应用程序）

Upload files to Django Channels through a Websocket connection ( from react native app )

javascript

react-native

multipartform-data

form-data

django-channels