問題タブ [filepond]

新しい Web サイト用の簡単なファイル アップロード ソリューションを入手する必要があります。アップロード用の Filepond と、ファイルをローカル ファイル システムに保存するための小さなプログラムを実行しようとしています。

新しい Ubuntu LTS 18 マシンで次のコードを実行しました。

https://codeunshackled.com/2018/11/03/React-File-Uploader-With-Node-Express/

Filepond はエラーの詳細を提供せず、「アップロード中にエラーが発生しました」というメッセージを表示します。onerror イベントを使用してみましたがconsole.log、トリガーされないようです。サーバーとフロントエンドは両方とも、異なるポートの同じ Linux ボックスにあります。

vagrant を介して、いわゆるPHP Boilterplateを使用する代替サーバー メソッドがあります。そこで vm は起動せず、小さなファイルのアップロード ソリューションとしては扱いにくいように見えます。

次の Nodejs コードを使用して、ファイルをアップロードして保存することに成功しました。ただし、Filepond をこのサーバーに向けようとすると、「アップロード中にエラーが発生しました」という同じあいまいなメッセージが表示されます。

reactjs でのファイル アップロードに関する調査を行った後、Filepond に出会いました。これは優れたソリューションであり、Yii2(php) フレームワークを使用したアプリケーションでのファイル アップロードに関して必要なすべてを実際に処理できます。

私は FillPond をインストールし、 https: //itnext.io/uploading-files-with-react-and-filepond-f8a798308557 に示されている基本的なチュートリアルに従っています。

実際に、ここから Yii2 フレームワークにファイルをアップロードして、正常に保存できます。

ここで、ファイルを他のフォーム データと一緒にフォームにアップロードして送信できるようにしたいと考えています。これが可能かどうかわかりませんか?? はいの場合、どうすればいいですか??

私はまた、私がそれらを使用することに非常に興味を持っているトリミングとサイズ変更のオプションを見てきました. このプラグインをインストールまたは統合する方法がわからないため、このプラグインを使用するにはどうすればよいですか。（プレビューを正常にインストールしました）。

注: https://pqina.nl/filepond/docs/patterns/api/filepond-instance全体を読んだところ、instantUpload などのプロパティや processFile などの関数が表示されます。しかし、私がそれらを統合しようとすると、それらはうまくいかず、私が望むように機能しません

これが私のレンダリングコードです

私の送信機能

私のYii2 APIは次のようになります

これに関するアイデアは高く評価されます。

シンプルなreactJSアプリケーションがあります。このアプリには、Filepond コンポーネントをテストする Web ページがあります。ファイルのアップロード時に Filepond コンポーネントによって呼び出される nodeJs サーバーもあります。Filepond コンポーネントが定義されている場合のコードは次のとおりです。

私は何をしたいですか？1 - 単一の PDF ファイルをアップロードします 2 - ファイルのアップロード時に、uploadId をサーバーに渡します

何が起こっている？=> ファイルはアップロードされますが、そのタイプに関係なく任意のファイルを選択できるため、acceptedFileTypes="application/pdf" は考慮されません

=> uploadId 値を渡す/取得することができません

これらの2点を達成する方法について何か助けはありますか?

この 2 点を除けば、コンポーネントは正常に動作し、ファイルを正しくアップロードできます。

ありがとうございました、

よろしくお願いします