Question

Я вижу ту же проблему с импортом всех плагинов.
ErrorScreenShot Проверено, что они не работают должным образом, в браузере возвращают для загрузки файла. Я пытаюсь закодировать фотографию для загрузки в MongoDB Atlas. Ответ на запрос файла Похоже, это какая-то проблема TypeScript. Я не смог найти решение. Использование кода VS с React.
Попытка до сих пор ...

Переустановка всех плагинов с Yarn против NPM и добавление @ type / перед пакетом
, который я создал файл Declarations.d.ts для объявления (как предлагается). Размещается в / sr c root, а также в filepond / types /. Может быть, нужно поместить в другой каталог?

declare module 'FilePondPluginImageResize';
declare module 'FilePondPluginFileEncode';
declare module 'FilePondPluginImageExifOrientation';
declare module 'FilePondPluginImagePreview';
declare module 'FilePondPluginImageTransform';

удалить '. js' из пакета плагина filepond. json "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>
    );

  }
 }

Вот пакет filepond. 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-response. 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"

и пакет проекта. 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"
  },

Robinhood · Answer 1 · 13 февраля 2020

Это ошибка машинописного текста, и @types для плагина кодирования файлов еще не существует.

Создайте объявление типа в вашем файле объявление.d.ts, но вместо

declare module 'FilePondPluginFileEncode';

попробуйте

declare module 'filepond-plugin-file-encode';

, и это исправило это для меня.

Ошибка импорта плагина FilePond - не удалось найти файл объявления для «...»

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Ошибка импорта плагина FilePond - не удалось найти файл объявления для «...»

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы