使用表单数据和 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

对象而不是

FormData

包中声明的类型的

form-data

对象。因此，它会产生

TypeError: f.getHeaders is not a function

错误。

如果我将

import

语句更改为：

，也会发生同样的事情

import SomeFormDataThatIsNotNative from 'form-data';

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

import * as SomeFormDataThatIsNotNative from 'form-data';

并调用构造函数，如下所示：

   const f = new SomeFormDataThatIsNotNative();

我需要帮助理解为什么实例化一种类型的对象（在

FormData

包中声明的

form-data

）会导致不同类型的对象（本机

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(),
  });
});

我仍然想了解为什么它不适用于渲染器进程中的代码，但现在，我可以继续前进。

Answer 2

因为配置，你使用

nodeIntegration: false,
contextIsolation: true

就可以了， 但渲染进程不能使用require。