問題タブ [ng-file-upload]

ユーザーがng-file-upload.txtを使用してサーバーにファイルをアップロードできる AngularJs を使用して Web アプリを作成しました。

ここで、単純な Node.js サーバーでアップロード部分をテストし、ページの進行状況バーとエラー メッセージがどのように動作するかを確認したいと考えていましたが、Node.js とバックエンド全体がどのように機能するかについての知識が非常に乏しいため、ng-file-uploadの非常にwikiによって提供される Node.js サーバー。

このapp.jsファイルに私をもたらしたいくつかの変更を加えようとしました:

UserController.jsはこのように単純です

AngularJs アプリのディレクティブのコントローラー内で、この方法でng-file-upload アップロード サービスを使用します

最後に、次のようにサーバーを起動します。

そしてすべてがうまく見えます：

以上のことから、AngularJs Web アプリを起動してファイルをアップロードしようとすると、次のエラーが表示されます。

いくつかのグーグル検索の後、このような CORS リクエストを許可するために使用される多くの要点が見つかりましたが、Node.js の知識が乏しいため、これらのコード行をどこに配置すればよいかさえわかりません。

さらに、パーツ自体に a を取得しようとしたconsole.log(err)ところapp.js form.parse、端末に次のように出力されました。

この単純な Node.js サーバーを機能させるには何が足りないのでしょうか?

編集 29/07/2015

@Can Guney Aksakalliによって提案された最初のオプションに従うことにしましたが、それが私ができる唯一のオプションですが、コードが次のようになっている場合でも:

この解決策は機能していません。node app.js最初の質問の最後の部分で書いたように、Chrome コンソールと を呼び出した端末の両方で同じエラー メッセージが表示され続けます。

ng-repeat を使用して、動的に生成された HTML フォームから画像ファイルをアップロードしたいと考えています。単一の画像ファイルをアップロードするために ng-file-upload モジュールを使用しています ( https://github.com/danialfarid/ng-file-upload )。静的 HTML からファイルをアップロードすると、正常に動作します。しかし、動的に生成された HTML からファイルをアップロードしようとすると、期待どおりに動作しません。ファイルがアップロードされず、次のように Firefox コンソールでエラーが発生します。

ファイル制御セットの ng-model を null に割り当てると、フォームは正常に送信されます。例えば; もしも

と

他のパラメーターは HTTP サービスによって送信され、通常どおりデータベースに保存されますが、ファイルはアップロードされません。

この動的に生成された HTML の場合、file オブジェクトを input[type=file] に割り当てる方法はありますか??

コードPLUNKERはここで作成されます

http://plnkr.co/edit/S7hnVJnuDjWUMQ6PYewk?p=preview

次のコードがあります。

HTML :

ジャバスクリプト：

上記のコードはjsFiddleで正常に動作し、このドキュメントにも注意深く従いました。に表示されるウィンドウエクスプローラーで画像を選択すると、動作するようになりましたimg width="80" height="80" ngf-src="files[0]" ngf-default-src="'/thumb.jpg'" ngf-accept="'image/*'">。ここまでは順調ですね。

しかし、オン$scope.$watchロードとconsole.log($scope.files);プリントのみが機能するようundefinedです。角度が2回目にダイジェストループを呼び出す必要がある場合、それは呼び出されず、アップロードを実行する$scope.$watch呼び出しを防ぎます。$scope.upload($scope.files);あたかも機能しないかのように何も起こってng-model="files"いません。これをデバッグするのに数時間を費やしました。助けてください。

このリンクhttps://github.com/danialfarid/ng-file-uploadを使用して、angularjs の WAMP(localhost) にファイルをアップロードしようとしています。しかし、ローカルホストにファイルをアップロードすると、そのフォルダーの HTML コードを含む html 応答を受け取ります (ログに記録されます)。

私を助けてください..

ログに表示される応答は

私を助けてください。動作後に URL を元の URL に置き換えます。

ng-file-uploadとCarrierwaveを組み合わせて複数のファイルをアップロードしようとしていますが、サーバー側のコントローラーは 1 つのファイル (選択したファイルの最後の項目) しか受け取りません。

クライアント側（参照）

html

js

console.log(files)Array[File, File, ...] を出力します(ブラウザ: FireFox)。したがって、クライアント側では、選択したファイルを取得します。ng-file-uploadのGitHubページでは、.html5

サーバー側（参考）

posts_controller.rb

は@post.attaches投稿の添付ファイルで、 のパラメータparams[:file]によってクライアント側から送信されます。fileUpload.upload

ファイルの配列を に保存したいのですが、選択したファイルのうち 1 つのファイルしか含まれていません @post.attaches。プリント:params[:file]puts params[:file]

これは、 にファイルが 1 つしかないことを示していますparams[:file]。このパラメーターの使用法に問題があるかどうかはわかりません。

どうすればこの問題を解決できますか?

これが私のpost.rbモデルであり、必要に応じて参照用に( carrierwaveattach_uploader.rbによって作成された):

post.rb

attach_uploader.rb

データベースの@post.attaches列postsはによって追加されます

アプリケーションで doc または docx ファイルをアップロードしようとしています:

景色 ：

コントロール:

画像や .pdf はアップロードできますが、.doc や .docx はアップロードできません。ng-file-upload のバージョン 1.3.1 を使用していることに注意してください。6.x にアップグレードできませんが、ここから問題が発生するとは思いません。

シナリオ：

開発サイトのブログ機能 (angular + firebase + Aws S3 + ng-file-upload )

画像を S3 にアップロードして保存し、URL を firebase に保存して、ブログ投稿がレンダリングされたときに呼び出されるようにする

問題 -

• アップロード時に 403 エラー アクセスが拒否されました - リクエスト ヘッダーの acl が「public-read」の場合
• 「非公開」作品 - アップロードするが、ページには表示しないことを意味します

(* ただし、画像を手動で変更して Aws S3 バケットで一般公開すると、画像はブログでレンダリングされます*) - 問題がどこにあるのかを把握するために輪になっていきます

ここにコードがあります

// ポリシー ドキュメント

ウィンドウ全体をドロップエリアとして使用することはできますか?

確かに、ngf-drop属性を body に追加することはできますが、他のいくつかの HTML 要素が横たわっていて、そこにファイルをドロップできません… そうしないと、DIV を使用してそれらの属性を追加し、他のすべての要素の上に配置することはできません。クリック可能。

または、どうすればバニラのjs / cssでその動作を実現できますか?

「 https://github.com/nervgh/angular-file-upload 」にあるangularjsファイルアップローダーを使用しているため、jsコードは次のようになります。

今、私はuploaders[0].queue.length = 1を取得できますが、 uploaders[0].queue [0].file.nameのような他のプロパティは取得できません。何か提案はありますか?