如何在 React 中上傳文件？

Question

我正在嘗試使用 react-images-upload 上傳 jpeg 文件（2.1Mb），但是，當我在后端保存收到的文件時，它有 7.5 Mb。 誰能給我建議以了解出了什么問題？

<ImageUploader
  withIcon={true}
  buttonText="Choose the Document"
  onChange={onDrop}
  maxFileSize={5242880}
  idealResolution={{ width: 640, height: 480 }}
  isMaxResolution={true}
/>

和句柄功能：

const onDrop = (documentFiles, documentDataURLs) => {
const document = documentFiles.pop();
document.arrayBuffer().then((arrayBuffer) => {
dispatch(
   submitDocument(
      [{ name: document.name, bytes: new Uint8Array(arrayBuffer) }],
          submitDocumentCallback
        )
      );
    });
  };

在后端，我只是使用 FileOutputStream 保存字節。

Answer 1

我查看了 react-images-upload 的源代碼，不得不說它看起來不像我想要投入生產的東西。

我也沒有看到您實際上是如何將其上傳到服務器的。 您的示例不包括您指定服務器 URL 的位置。

對於在 React 中上傳文件，我會選擇更強大的東西。 我偏向於反應上傳（因為這是我的項目）。 所以我會推薦它。 但也有其他好的（我猜）。

例如，使用 react-uploady，它就像這樣簡單：

 import React from "react"; import Uploady from "@rpldy/uploady"; import UploadButton from "@rpldy/upload-button"; const MyApp = () => ( <Uploady destination={{url: "https://my-server.com/upload"}}> <UploadButton/> </Uploady> );