向后端发送数据的更好方法

如果您是前端开发人员，曾经从事过图片上传、视频上传或音频上传到后端的工作，那么您应该知道上传这些类型的数据是一个缓慢的过程，当一次上传大量数据时，它甚至会变得滞后。

当我们想要将图片或音频上传到后端时，我们不能直接以原始格式将其发送到后端。每张图片或音频都是二进制格式，需要先在前端转换为 base64 格式，然后再发送到后端。如果要从后端再次获取数据，则无法以 base64 格式在前端显示。这意味着每次 GET 请求，后端都必须将数据从 base64 转换为二进制，然后再执行 GET 请求。

可以清楚地看到，这需要两次转换。首先从二进制数据转换为 base64 数据，然后再从 base64 转换为二进制数据，最终导致数据量较大，上传速度缓慢。

但是，总有解决办法。我们不用在前端将其转换为 base64，而是直接将二进制数据发送到后端，这意味着后端甚至不需要进行任何转换，从而加快了处理速度。

但是，现在的问题是如何做到这一点？

您可以使用FormData()构造函数将二进制数据直接发送到后端。

首先，您必须创建 formdata 的实例。

var formData = new FormData();

然后您必须将数据附加到 formData。

formData.append('username', 'Chris');

让我们举个例子。

const sendAudioAsync = (audioChapter, index, audioBookId) => {
    message.warning(`Uploading audio ${index}`);

    const sendingAudio = new FormData();
    sendingAudio.append('audio', audioChapter?.audio); 
    sendingAudio.append('size', audioChapter?.audio?.size); 
    sendingAudio.append('name', audioChapter?.audio?.name); 
    sendingAudio.append('title', audioChapter?.title); 
    sendingAudio.append('time', audioChapter?.time);
    sendingAudio.append('index', index); 
}

上面的例子是我正在工作的客户的实时示例，其中我必须将音频及其详细信息发送到后端，并且我曾经FormData发送过它。

FormData 始终是键值对，如果使用 FormData 将二进制数据直接发送到后端，则必须将名称和数据作为键值对。