如何解决这个 MERN 堆栈 filebase64 错误？答案

【问题标题】：How to solve this MERN stack filebase64 error?如何解决这个 MERN 堆栈 filebase64 错误？
【发布时间】：2021-05-21 07:51:32
【问题描述】：

import FileBase from 'react-file-base64';

在 VS Code 中悬停三点指示器后出现错误。

除了插入图片的 filebase64 部分外，我的设置已经成功（其他输入字段已成功插入 MongoDB Cloud）。

模块“d:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min” 找不到模块“react-file-base64”的声明文件。 'd:/nodejs/memories_project/client/node_modules/react-file-base64/build/build.min.js' 隐含了一个 'any' 类型。尝试npm i --save-dev @types/react-file-base64（如果存在）或添加包含declare module 'react-file-base64';ts(7016) 的新声明（.d.ts）文件

这里是我的package.json的依赖：

"dependencies": {
    "@material-ui/core": "^4.9.10",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "moment": "^2.27.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-file-base64": "^1.0.3",
    "react-redux": "^7.1.3",
    "react-scripts": "3.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },

【问题讨论】：

标签： reactjs mongodb typescript mern react-fullstack

【解决方案1】：

如果该值未保存在数据库中，则表示它为空或不存在。检查模型文件（/server/models/）中的字段名称是否与您在表单文件（/client/src/components/）中的字段名称相同。

现在错误信息与实际问题无关。

这是因为 react-file-base64 不提供任何类型。要消除错误，您需要在 .d.ts 文件中声明模块。

为此，请使用以下代码在您的项目根目录（package.json 所在的位置）中创建一个 .d.ts 文件（例如 index.d.ts）：

declare module 'react-file-base64';

或者你可以用

声明所有

declare module '*';

【讨论】：

【解决方案2】：

我遇到了类似的问题，花了两个多小时尝试调试。这可能来自一系列问题，我的愚蠢错误是，当我没有为多个图像上传配置它时，我将多个选项设置为 true。

以我的代码修复为例。

<FileBase 
    type="file"
    multiple={false}
    onDone={({base64}) => setListingData({ ...listingData, selectedFile: base64})}
/>

【讨论】：

【解决方案3】：

您只需要更改组件，我在其文档中看到的最新版本是使用 FileBase64 而不是 FileBase

所以改成 > import FileBase from 'react-file-base64';

Source

【讨论】：