如何阻止NextJS API将JavaScript File Object解析为原始数据
问题:NextJS API端点调用OpenAI Whisper API时出现400错误
直接调用OpenAI Whisper API转写音频可以正常工作,代码如下:
const data = new FormData(); data.append("file", Javascript File Object Goes Here); data.append("model", "whisper-1"); data.append("language", "en"); const transcription = await fetch("https://api.openai.com/v1/audio/transcriptions", { headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}}`, }, method: "POST", body: data, });
为了隐藏API密钥,我将上述逻辑迁移到NextJS的api/transcribe API端点,前端调用代码改为:
const res = await fetch("api/transcribe", { method: "POST", body: Javascript File Object Goes Here, });
但此时请求返回400错误,响应信息如下:
Response { [Symbol(realm)]: null, [Symbol(state)]: { aborted: false, rangeRequested: false, timingAllowPassed: true, requestIncludesCredentials: true, type: 'default', status: 400, timingInfo: { startTime: 2930193.4380999804, redirectStartTime: 0, redirectEndTime: 0, postRedirectStartTime: 2930193.4380999804, finalServiceWorkerStartTime: 0, finalNetworkResponseStartTime: 0, finalNetworkRequestStartTime: 0, endTime: 0, encodedBodySize: 223, decodedBodySize: 223, finalConnectionTimingInfo: null }, cacheState: '', statusText: 'Bad Request', headersList: HeadersList { [Symbol(headers map)]: [Map], [Symbol(headers map sorted)]: null }, urlList: [ [URL] ], body: { stream: undefined } }, [Symbol(headers)]: HeadersList { [Symbol(headers map)]: Map(9) { 'date' => 'Sat, 11 Mar 2023 07:00:43 GMT', 'content-type' => 'application/json', 'content-length' => '223', 'connection' => 'keep-alive', 'openai-organization' => 'user-62k83f0uipvo3gziejoo9nmm', 'openai-processing-ms' => '194', 'openai-version' => '2020-10-01', 'strict-transport-security' => 'max-age=15724800; includeSubDomains', 'x-request-id' => '708585d2ea17964bc733a491eb41439f' }, [Symbol(headers map sorted)]: null } }
检查API端点的请求数据后发现,原本的JavaScript File Object被转为了原始乱码数据:
��D�\x00\x12\x10.\x00\x00\x18�\x00p�\x00\x02\x01���\x10>\x1F\x10\x1C\x108N�\x01�����\x04<���b\x19`>\x7F\f\t���9���� 9\f\t�>�\x00~'�B\x0Fˇ�\x17yp�E�\x108\x0F�\x0F��9�\x04�G*$��S��D�\n" + '\x118B\x14\x000�$*E�t�gC.RBzV\\��\x03�P��U�M4q�I)Ie�\r3�\n' + '���m�P��\x18��9p�\x05�:\x10 ְ$�\x10\x01/M݀\x03�� �\'G\x10 �,/}� \x019��D�\x18\x12Y*4\x00\x18�p��8�\x15 �\x18��#����\x1CT�X\x00\x16\x13�h�����r�E���l�)IƔ\'z9\x07\x04a\x13`2\x15�yؖ%��� �]\x03���,EͯHy���$\x10\x03�\x10 h��\x1D��D�!\x18)�|\x01L@\x00���\x07\x06��s\x14X�Dt\x17[⋴KD�8�\x17\x7F������w�2�\x13\'��CR //�ɗ|����+�\x07��\x10~#4\x0F����=f\x02�Do�\r0�(����\f���D�\x13\x16�*�\x01�P\x00&\x14�\f+\x16�i9\x19��b\x1F,z\x14.B@4SZ���́�1K�\'1�� d��������=\\���\t\x11���������s\'��Fc\x19� �U��K\x14���q�\b���D�\x0B\x12�*�\x01�8\x00ej�m��TCg��\x05��\t�?�\x1Ez�\x1C� ��\x05A�d��Ķ���SH݉�M�\x7Fԡ��0�����������8����5...
我尝试通过以下代码禁用NextJS的bodyParser来阻止文件解析:
export const config = { api: { bodyParser: false, }, }
但禁用后req.body直接变成了undefined,问题依然没有解决。我是NextJS API端点的新手,希望得到解决方案。
补充信息:音频文件通过<input type="file" accept="audio/*" onChange={saveFile} />获取,保存代码为const file = e.target.files[0];
内容的提问来源于stack exchange,提问作者vsr
相关产品推荐
相关产品推荐

