要件:
サポートバッチアップロード大きなファイル(20G)、ダウンロード、およびコンピュータの間のユーザーのアップロードが立ち往生ので、経験を表示されないことを確認する必要があります。
12メガバイト/ Sのネットワークアップロード速度内での高速ネットワーク
サーバーのメモリフットプリントの低
アップロードフォルダ、10,000以上のフォルダ内のファイル数をサポートし、階層が含まれています。
PCプラットフォーム・オペレーティング・システムを完全にサポートし、WindowsやLinux、Macの
サポートバッチファイルやフォルダは、HTTPをダウンロードしてください。後に送信ページを更新し続けます。ブラウザの保存スケジュール情報を閉じた後。
サポートバッチアップロードとダウンロードフォルダ、サーバ側保持フォルダ階層、サーバー側のファイルと同じサンドイッチ構造と地域レベル。
ブラウザを閉じた後、HTTPのサポートや、ブラウザをリフレッシュすることは、まだ進歩を保持することができます。
構成管理フォルダのサポート、新しいフォルダのサポート、フォルダディレクトリナビゲーションサポート
アップロードのインタラクティブなとフレンドリーな、タイムリーなフィードバックの進捗状況;
セキュリティサービス側ではなく、JVMのメモリ・オーバーフロー機能原因アップロードファイルは、他の機能の使用に影響を与えるからです。
アップストリーム帯域幅のネットワークの最大使用、アップロード速度を向上させます。
分析:
大容量のファイル、クライアントまたはサーバー側では、一回の送信を読めば、受信、望ましいものではないために、それは簡単にメモリの問題につながることができます。だから、大きなファイルのアップロードのために、切断されたセグメントを使用してアップロードします
ビューのアップロードの効率の観点から、最大効率を達成するために、複数のスレッドの同時使用をアップロードします。
ソリューション:
ファイルアップロードのフロントページには、これらのコンポーネントのいくつかは、このような非同期アップロードファイルなどのファイルアップロード機能の基本的な日常のニーズを満たすために、このようBaiduのオープンソースコンポーネントとしてより有用アップロードコンポーネント、WebUploader、UP6ゼ優れたソフトウェアの一部を使用することもできます、フォルダー、ドラッグ&ドロップのアップロード、アップロード、アップロードの進行状況の監視、サムネイルファイル、でも大きなファイルHTTPを貼り付け、秒単位で大きなファイルを転送します。
最初のステップ:
データベース設定
プロジェクトのデータベース構成はDBConfig.javaファイルで、このファイルにデータベースを構成するための唯一の必要性です。
DBConfig.javaファイルで提供MySQLは、SQL ServerやOracleの構成情報は、ちょうどすることができ、対応するデータベース構成に記入します。MYSQLは、MySQLデータベースの接続情報を使用している場合は、Oracleデータベースの接続情報を入力するには、Oracleを使用している場合は、記入します
アップロード:{uploadLimit:5、FILESIZELIMIT:31744、removeTimeout:0.8}
これら三つの変数の意味はで表されます。
uploadLimit:アップロードされたファイルの制限の数を表し、番号5は、ファイルのアップロード制限が5で表し、
FILESIZELIMIT:限界のアップロードファイルサイズを表し、単位は31M表される31744キロバイト、あります
removeTimeout:制限時間は、ファイルの削除を示しています
ファイルサイズが上限を超え参照する場所を見つけるために、これらの変数を使用し続ける、などの
ファイルサイズの設定、ユーザーはファイルサイズの制限を選択する必要がある場合は、FILESIZELIMITにしてup6.jsバイト単位で設定することができます。
BJUIが大きなファイルのフロントエンドフレームをアップロード制限を理解するためには、ファイルアップロードのサイズと数を増加させるために用いることができ、我々は次のようにドキュメントbjui-all.jsで制限uploadLimit FILESIZELIMITのプロパティと属性を変更することが表示される場合があり、我々本明細書中で使用される原理をカバーするものであるとして、JSPファイルの交換は、実行することができる、と再定義はuploadLimit FILESIZELIMITは、デフォルト設定bjui-all.jsファイルを上書き属性属性。
uploadLimit FILESIZELIMIT特性と、属性ファイルに対応bjui-all.js JSPファイルが書き込まれるべきデータのアップロード制限属性データファイルサイズ制限属性を属性は、データのみ-upload-後に書き換えますリミット=「800」およびデータ・ファイル・サイズ制限=「5131264」は、することができ、ここに注意を払う必要がありますが、単位KB、上記デジタル表現501Mです。
Uploadifyコントロールのプロパティは、直接、この記事を参照することができますについてどのようなネットワークのマニュアルを教えてください:
https://www.cnblogs.com/yangy608/p/3915349.html
プロパティ名 |
デフォルト値 |
説明 |
オート |
真 |
アップロード後に直接ファイルを選択するために、trueに設定すると、アップロードし、アップロードボタンをクリックする偽のみ必要です。 |
buttonClass |
」 |
ボタンのスタイル |
buttonCursor |
'手' |
ボタンルックスの上にマウスポインタを置きます |
buttonImage |
ヌル |
[参照]ボタンのパス絵。 |
buttonText |
'SELECT FILES' |
[参照]ボタンをテキスト。 |
checkExisting |
偽 |
ファイルがすでに存在するファイルをサーバー側でアップロードされます場合は、リターンがある確認するために、繰り返し検査手順をアップロードし、ノーリターンはありません0 |
デバッグ |
偽 |
trueに設定されている場合、それはデバッグモードが有効になっていると述べたSWFUploadの |
fileObjName |
'FILEDATA' |
ファイルアップロードオブジェクトの名前名前は「the_files」の場合、PHPのプログラムは、ファイルアップロードオブジェクトを処理するために$ _FILES [「the_files」]を使用することができます。 |
FILESIZELIMIT |
0 |
文字列は、例えば「2メガバイト」として、単位として(B、KB、MB、またはGB)を使用することができる場合、整数は、サイズがKBの単位で表現された場合、ファイルサイズ制限をアップロード。 制限なしの場合は0に設定されている場合 |
fileTypeDesc |
'すべてのファイル' |
プロパティ値はfileTypeDescに設定した場合、「RARドキュメントのPDFファイルを選択してください」、プロンプトのテキストファイル選択ダイアログボックスを設定するために使用される効果的なfileTypeExtsプロパティの後に設定する必要があります |
fileTypeExts |
'*。*' |
「... * RAR *ドキュメント;; * PDF」:設定は、次のような、ファイルフォーマットの種類を選択することができます。 |
へformdat |
同時にJSON形式のサーバにアップロードファイルごとに提出され、追加のデータは、動的な「onUploadStart」イベントを設定するための「設定」を使用します。 |
|
高さ |
30 |
[参照]ボタンがデフォルト値の高さを設定します |
ItemTemplateに |
偽 |
アップロードHTMLテンプレート、次のタグキューを設定する: |
方法 |
役職 |
提出をGETまたはPOST |
マルチ |
真 |
trueに設定すると、あなたは、複数のファイルをアップロードすることができます。 |
overrideEvents |
「overrideEvents」:[「onUploadProgress」]など、イベントを書き換えることができる設け、JSON形式 |
|
preventCaching |
真 |
trueの場合、自動的にその都度追加防ぐURLキャッシュ効果にランダムな文字列パラメータアップロードファイル、アップロード結果の束 |
progressData |
「割合」 |
セットアップロードの進捗状況表示、アップロードの割合ショー率、高速アップロード速度表示 |
キューID |
偽 |
セットアップロードキューコンテナDOM要素のID、falseの場合は、自動的にキュー・コンテナを生成します。 |
queueSizeLimit |
999 |
選択したファイルの数がこの制限を超えた場合に、ジョブ・キュー・ディスプレイの最大数は、onSelectErrorイベントを開始します。 |
removeCompleted |
真 |
それがfalseに設定それは、このタスクが表示されたままになります場合は、自動的に、キューから削除されたタスクを完了したかどうか。 |
removeTimeout |
3 |
タスクが完了した後にセットがキューから自動的に削除した場合、完了区間から削除するように設けられてもよいです。 |
requeueErrors |
偽 |
trueに設定した場合、アップロードは単一のタスクがエラーを返し失敗し、アップロードするためにタスクキューを再結合します。 |
successTimeout |
30 |
成功したファイルのアップロードサーバーが成功フラグを返す必要があります後、結果のこのセットは、タイムアウトを返さ |
swfファイル |
'uploadify.swf' |
ファイルuploadify.swf相対パス。 |
アップローダー |
uploadify.php |
相対パス、バックグラウンド処理プログラム。 |
uploadLimit |
999 |
アップロードされたファイルの最大数は、到達した場合や、この制限はonUploadErrorイベントをトリガします上回りました。 |
幅 |
120 |
ボタンの設定ファイルブラウザの幅。 |
ステップ2:
后端修改
项目采用的最简单的jsp文件,修改起来非常简单。现在提供的DEMO基本上不需要进行其它的修改。只需要对地址进行简单配置就可以立即使用。
项目的依赖包全部都放在项目的lib目录中,可以直接导入。相关的IDE都能够自动导入,也是非常的简单。
由于项目后端使用的Spring Boot,本身也就是使用的Spring MVC文件上传部分,Spring MVC使用的是已经对Servlet文件上传封装了的MultipartResolver接口及其相关实现类和一些相关的类,具体的可以看Spring MVC文件上传源码部分,认为Spring源码还是需要读的,我们只要在Spring Boot启动类中注入这个Bean,或者自行写一个WebConfig配置类,注入一些Web相关的Bean即可,这样Spring Boot启动就会加载配置类,也需要自己写拦截器和全局AOP切面,去捕捉文件上传大小超过限制的异常处理等
基于Spring MVC文件上传组件MultipartResolver接口(核心),使用其中的CommonsMultipartResolver(实现了MultipartResolver接口)这个实现类,CommonsMultipartResolver中的maxUploadSize属性是它继承的抽象父类CommonsFileUploadSupport,这个抽象类其中的一个属性是FileUpload类,而这个类又继承自FileUploadBase这个抽象类,其中它的private long sizeMax = -1;就是maxUploadSize属性的最终设置地方。-1表示文件上传大小没有限制,但是我们一般都会设置一个限制值,这里设置的是210763776,这个值的单位是字节,我们将它设置为525336576字节,也就是501M的大小限制。
修改完以上前端和后端,提交修改的代码到git上即可。
第三步:
Nginx配置
进入到项目部署发布所在的Linux下,进入nginx服务器所安装的目录,
进入到nginx服务器所安装的目录
进入到nginx服务器目录下的conf目录
查看nginx.conf配置文件内容中的client_max_body_size配置的大小,这里设置的是300M。
使用vi或者vim打开nginx.conf配置文件,修改client_max_body_size的大小为501M,保存即可
进入到nginx服务器下的sbin目录下,我们使用./nginx -t查看配置文件是否成功使用,然后使用./nginx -s reload重启Nginx服务器即可。
第四步:
Tomcat配置
由于项目使用的是Spring Cloud,自然使用Spring Boot,我们这个项目还是使用外置的Tomcat作为他的服务器,便于我们对Tomcat服务器进行优化和设置。
进入到项目使用的Tomcat服务器的目录
进入到指定项目使用的Tomcat服务器的目录
进入到Tomcat服务器下的conf配置目录中
看到server.xml配置文件后
先行查看Tomcat服务器的配置,其中两个属性对于这次是比较重要的一个是connectionTimeout这个连接超时时间设置以及默认的maxPostSize属性的设置
使用vi或者vim打开server.xml配置文件,修改connectionTimeout的大小为2000000,这个属性的单位是毫秒,换算之后大概是半个小时,我们配置缺省的maxPostSize属性的值,默认情况下它的值是2097152,它的单位是字节,也就是2M的大小,修改完保存即可
修改完服务器之后,使用发布工具重新从git上拉取最新的代码和部署发布,重新启动脚本即可完成修改,再次尝试大文件上传,功能基本实现。
以上需要注意的是maxPostSize属性在各个Tomcat版本中的不同,可以参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/09/18/%E4%B8%8A%E4%BC%A0%E5%A4%A7%E6%96%87%E4%BB%B6%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/
欢迎入群一起讨论:374992201