javascript - Electron 从渲染器进程上传文件，使用表单数据和 axios

Question

我正在尝试以编程方式从 Electron 应用程序的渲染过程中上传文件(和一些字段)。为此，我正在使用 form-data 和 axios 包。

代码是 TypeScript，最简单的代码如下:

import axios from 'axios';
import fs from 'fs';
import FormData from 'form-data';

function upload(url: string, file: string, additionalFieldValue: string): void {
  const f = new FormData();
  f.append('additionalField', additionalFieldValue);
  f.append(file, fs.createReadStream(file));
  axios.post(url, f, {
    headers: f.getHeaders(),
  });
}

我遇到的问题是 f 始终是原生的 FormData 对象，而不是在 form-data 包中声明的类型的 FormData 对象。因此，它会生成一个 TypeError: f.getHeaders is not a function 错误。

如果我将 import 语句更改为:

import SomeFormDataThatIsNotNative from 'form-data';

或者如果我尝试使用别名:

import * as SomeFormDataThatIsNotNative from 'form-data';

并像这样调用构造函数:

   const f = new SomeFormDataThatIsNotNative();

我需要帮助来理解为什么实例化一种类型的对象(在 form-data 包中声明的 FormData)会导致不同类型的对象(原生 FormData )。我究竟做错了什么？我必须在主进程中移动代码吗？什么会在渲染器进程中起作用？

Answer 1

这不是真正的解决方案，更像是一种变通方法，但它确实有效。

我已将 upload 函数从渲染器进程移至主进程。这将上下文从在浏览器中运行更改为在 Node 下运行。

在渲染器进程中，我将 upload 替换为

import { ipcRenderer } from 'electron';

async function upload(url: string, file: string, additionalFieldValue: string) {
  return ipcRenderer('upload', url, file, additionalFieldValue);
}

在主进程中我添加了以下内容:

import axios from 'axios';
import FormData from 'form-data';
import { ipcMain } from 'electron';

ipcMain.handle('upload', async (event, url, file, additionalFieldValue) => {
  const f = new FormData();
  f.append('additionaField', additionalFieldValue);
  f.append(file, fs.createReadStream(file));
  return axios.post(url, f, {
    headers: f.getHeaders(),
  });
});

我仍然想了解为什么它不能仅与渲染器进程中的代码一起使用，但现在，我可以继续前进。