javascript - FilePond 插件导入错误 - 找不到“...”的声明文件
问题描述
我在导入所有插件时看到了同样的问题。
ErrorScreenShot
已验证它们在文件上传的浏览器返回中未按预期工作。我正在尝试对照片进行编码以上传到 MongoDB Atlas。
文件请求响应
这似乎是某种 TypeScript 问题。我一直无法找到解决方案。将 VS Code 与 React 一起使用。
到目前为止尝试...
- 使用 Yarn vs NPM 重新安装所有插件并在包前添加 @type/
- 我创建了一个 declarations.d.ts 文件来声明(如建议的那样)。放置在 /src 根目录以及 filepond/types/ 中。也许需要放在另一个目录中?
declare module 'FilePondPluginImageResize';
declare module 'FilePondPluginFileEncode';
declare module 'FilePondPluginImageExifOrientation';
declare module 'FilePondPluginImagePreview';
declare module 'FilePondPluginImageTransform';
- 从文件池插件 package.json 中删除 '.js' "main": "dist/filepond-plugin-file-encode.js",
- 试过了
import FilePondPluginFileEncode from '/fullpath/filepond-plugin-file-encode.js';
- 删除 FilePond 和 FilePond-React 并重新安装。
我没有发现下面的代码有任何问题,除了响应没有编码。因此插件声明必须以某种方式被破坏。
import React, { Component } from 'react';
// Import React FilePond
import { FilePond, registerPlugin } from 'react-filepond';
// import * as FilePond from 'react-filepond';
// Import FilePond styles
import "filepond/dist/filepond.min.css";
// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageResize from 'filepond-plugin-image-resize';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
// Register the plugins
registerPlugin(FilePondPluginFileEncode, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImagePreview, FilePondPluginImageResize, FilePondPluginImageTransform);
// Our app
export default class ImageHandler extends Component {
constructor(props) {
super(props);
this.state = {
// Set initial files, type 'local' means this is a file
// that has already been uploaded to the server (see docs)
files: [
{
id: "",
name: "",
type: "",
size: 0,
metadata: {
resize: {
mode: "",
size: {
width: 0,
height: 0
}
},
crop: {
rect: {
x: 0,
y: 0,
width: 0,
height: 0
},
aspectRatio: 1
}
},
data: ""
}
],
fileUploaded: false
};
}
handleInit() {
console.log("FilePond instance has initialized", this.pond);
console.log(this.state.files);
}
uploadFiles() {
this.props.parentFileCallback(this.state.files)
this.setState({fileUploaded:true})
}
render() {
return (
<div className="App">
<FilePond
ref={ref => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
allowImageExifOrientation={true}
allowImageTransform={true}
allowImageResize={true}
allowReorder={true}
allowFileEncode={true}
imageEditInstantEdit={true}
imageResizeMode={'cover'}
imageResizeTargetWidth={800}
imageResizeTargetHeight={null}
instantUpload={false}
maxFiles={5}
oninit={() => this.handleInit()}
onupdatefiles={fileItems => {
// Set currently active file objects to this.state
this.setState({
files: fileItems.map(fileItem => fileItem)
});
this.uploadFiles();
console.log(`photo files ${this.state.files[0]}`)
console.log(`uploaded? ${this.state.fileUploaded}`)
}}
/>
</div>
);
}
}
这是文件池 package.json ...
"name": "filepond",
"version": "4.9.5",
"description": "FilePond, Where files go to stretch their bits.",
"license": "MIT",
"author": {
"name": "PQINA",
"url": "https://pqina.nl/"
},
"homepage": "https://pqina.nl/filepond/",
"repository": "pqina/filepond",
"main": "dist/filepond.js",
"browser": "dist/filepond.js",
"module": "dist/filepond.esm.js",
"keywords": [
"javascript",
"file",
"upload",
"drag",
"drop",
"browse",
"paste",
"image",
"preview"
],
"browserslist": [
"last 1 version and not Explorer 10",
"Explorer 11",
"iOS >= 9",
"Android >= 4.4"
],
"files": [
"dist",
"types/*.d.ts"
],
"types": "types/index.d.ts",
"scripts": {
"test": "npx jest",
"start": "npx rollup -c -w",
"build": "npm run scripts | npm run styles",
"scripts": "npx rollup -c",
"styles": "npm run styles:pretty && npm run styles:nano",
"styles:pretty": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer | npx prettier --single-quote --parser css | node banner-cli.js FilePond > dist/filepond.css",
"styles:nano": "cat src/css/* | npx node-sass | npx postcss --no-map --use autoprefixer --use cssnano | node banner-cli.js FilePond > dist/filepond.min.css",
"dtslint": "dtslint types"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-transform-template-literals": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel-jest": "^24.8.0",
"cssnano": "^4.1.10",
"dtslint": "^0.9.3",
"jest": "^24.8.0",
"node-sass": "^4.12.0",
"postcss-cli": "^6.1.3",
"prettier": "^1.18.2",
"rollup": "^1.17.0",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-license": "^0.8.1",
"rollup-plugin-node-resolve": "^4.2.4",
"rollup-plugin-prettier": "^0.6.0",
"rollup-plugin-terser": "^4.0.4",
"typescript": "^3.6.2"
}
}
filepond-react package.json
{
"name": "react-filepond",
"version": "7.0.1",
"description": "A handy FilePond adapter component for React",
"homepage": "https://pqina.nl/filepond",
"license": "MIT",
"repository": "pqina/react-filepond",
"main": "dist/react-filepond.js",
"browser": "dist/react-filepond.js",
"module": "dist/react-filepond.esm.js",
"keywords": [
"react",
"reactjs",
"filepond",
"file",
"upload",
"drag",
"drop",
"browse",
"image",
"preview"
],
"author": {
"name": "PQINA",
"url": "https://pqina.nl"
},
"scripts": {
"start": "npm run build:watch",
"build": "mkdirp dist && npm run build:browser && npm run build:module",
"build:browser": "babel lib | bannerjs -m > dist/react-filepond.js",
"build:module": "minicat lib/index.js | bannerjs -m > dist/react-filepond.esm.js",
"build:watch": "nodemon --watch lib -x \"npm run build\"",
"prepare": "npm run build"
},
"peerDependencies": {
"react-dom": "^16.0.0",
"react": "^16.0.0",
"filepond": ">=3.7.x <5.x"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"bannerjs": "^1.0.5",
"minicat": "^1.0.0",
"mkdirp": "^0.5.1",
"nodemon": "^1.17.3"
}
}
filepond-plugin-file-encode package.json
{
"name": "filepond-plugin-file-encode",
"version": "2.1.4",
"description": "File Encoding Plugin for FilePond",
"license": "MIT",
"author": {
"name": "PQINA",
"url": "https://pqina.nl/"
},
"homepage": "https://pqina.nl/filepond/",
"repository": "pqina/filepond-plugin-file-encode",
"main": "dist/filepond-plugin-file-encode.js",
"browser": "dist/filepond-plugin-file-encode.js",
"module": "dist/filepond-plugin-file-encode.esm.js",
"browserslist": [
"last 1 version and not Explorer 10",
"Explorer 11",
"iOS >= 9",
"Android >= 4.4"
],
"files": [
"dist"
和项目 package.json ...
{
"name": "travel-diary",
"version": "0.1.0",
"private": true,
"dependencies": {
"@loadable/component": "^5.12.0",
"@material-ui/core": "^4.8.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.0",
"axios": "^0.19.1",
"babel": "^6.23.0",
"babel-eslint": "^10.0.3",
"body-parser": "^1.19.0",
"bootstrap": "^4.4.1",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"express": "^4.17.1",
"filepond": "^4.9.4",
"filepond-plugin-file-encode": "^2.1.4",
"filepond-plugin-image-exif-orientation": "^1.0.6",
"filepond-plugin-image-preview": "^4.6.0",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.0",
"global": "^4.4.0",
"google-maps-react": "^2.0.2",
"method-override": "^3.0.0",
"moment": "^2.24.0",
"mongodb": "^3.4.1",
"mongoose": "^5.8.4",
"morgan": "^1.9.1",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-filepond": "^7.0.1",
"react-hot-loader": "^4.12.18",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-stylesheet": "^2.2.2",
"reactstrap": "^8.2.0",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styled-components": "^4.4.1",
"webpack": "4.41.2",
"yarn": "^1.21.1"
},
解决方案
这是一个打字稿错误,文件编码插件的@types 还不存在。
在您的 declaration.d.ts 文件中创建一个类型声明,而不是
declare module 'FilePondPluginFileEncode';
尝试
declare module 'filepond-plugin-file-encode';
这为我解决了问题。
推荐阅读
- excel - 如何在 Outlook 消息中插入多个不同范围的图像
- c# - 此示例打字稿(点网示例)中的数据模型在哪里?
- python - 如何修复仅在一台计算机上运行的 Exe 文件
- mysql - Kafka Connect JDBC 连接器查询 + 增量模式在初始轮询时因大型数据集而阻塞
- python - 如何创建用户给定数量的图像(在 PIL - Python 中)?
- python - 是否有更有效的方法来检查列表中的字符串以避免(稍微)修改重复?
- python-3.x - 在 python3 中通过 tcp 套接字发送不同的文件类型,给出 'UnicodeDecodeError'
- .net - winform关闭后如何释放内存
- ubuntu - 如何让用户使用目录
- mysql - 如何在 mysql 中使用 JOIN 性能进行更新?