有没有办法使用 React 和 Observables (rx.js) 将文件上传到 Node.js？

Question

我有一个 MERN 堆栈网络应用程序，它大量使用 rx.js “Observables”。我一直在搜索使我的应用程序能够将图像文件上传（二进制文件）到 Node.js api 端点（端点在接收端使用 npm 模块“multer”）的文档、插件、npm 模块等。

我一直无法使用 MERN + Observables 堆栈找到支持此特定功能的教程、库或模块。 Google 仅返回 Angular 的示例。而且在 stackoverflow 上似乎没有此类相关问题。

我有一个复杂的表单，有些字段是必需的，有些是可选内容。一项必需的输入是用于上传的图像文件。我的目标/希望是使用一系列链式 Observable 将所有这些数据传送到服务器。

是否有类似于 axios 的使用 observables 的 react 插件/模块/库，或者我只是因为“一厢情愿”而感到内疚？我想知道这是否可能，是否有人可以将我指向教程、文章、示例、github 等，或者直接告诉我方法。

注意：我对实现一个特殊的一次性案例并使用像 axios 这样的库没有任何问题，甚至只是编写原始的 JS XHR 来完成它，只是认为它会很好、干净和同质还要使用可观察对象来完成这项任务......另外，我对可观察对象还很陌生，所以我可能会遗漏一些重要的东西，或者根本不知道这个库（rx.js）不支持这种功能。

任何帮助、建议或见解都会很有用！非常感谢文档/文章/教程的链接！提前致谢！

Answer 1

您可以提供FormData 实例作为rxjs.ajax body 参数，浏览器会自动设置正确的Content-Type 标头。

查看示例代码：

const { ajax } = rxjs.ajax; // = require("rxjs/ajax")
const { fromEvent } = rxjs; // = require("rxjs")
const { mergeMap } = rxjs.operators; // = require("rxjs/operators")

const fileInput = document.getElementById("file");
const res$ = fromEvent(fileInput, "change").pipe(
  mergeMap(e => {
    const { files } = e.target; 

    const body = new FormData();
    body.append("some-field", "fome-field-value");
    body.append("file", files[0]);

    return ajax({
      url: 'https://httpbin.org/post',
      method: 'POST',
      body
    });
  })
);

const htmlSubscription = res$
  .subscribe(e => {
    const response = JSON.stringify(e.response, null, 2);
    document.getElementById('root').innerHTML = `
      <div>
        <span><b>POST</b> https://httpbin.org/post</span>
        <pre>${response}</pre>
      </div>`;
  });

<script src="https://unpkg.com/rxjs@6.5.3/bundles/rxjs.umd.min.js"></script>
<input type="file" id="file" />

<div id="root">select file and see what happens...</div>

也看看：

• 更多关于ajax的信息，这里是detailed answer
• 还有fromFetch operator，用它可以换行fetch request with multipart/form-data