요구 사항 :
지원 일괄 업로드 큰 파일 (20G)와 다운로드, 컴퓨터 동안 사용자의 업로드가 붙어 그래서 경험을 표시하지 않도록 할 필요가;
12메가바이트 / S의 네트워크 업로드 속도에서 빠른 네트워크
서버 메모리 풋 프린트 낮은
업로드 폴더, 10,000의 폴더에있는 파일의 수를 지원하고, 계층 구조가 포함되어 있습니다.
PC 플랫폼 운영 체제에 대한 완벽한 지원, 윈도우, 리눅스, 맥
지원 배치 파일 및 폴더, HTTP를 다운로드합니다. 후 전송 페이지를 새로 고침을 계속합니다. 브라우저 보존 일정 정보를 닫은 후.
지원 일괄 업로드 및 다운로드 폴더, 서버 측 보존 폴더 계층 구조, 서버 측 파일 같은 샌드위치 구조 및 지역 수준.
브라우저를 닫은 후, HTTP를 지원하거나 브라우저를 새로 고침 여전히 진행 상황을 유지 할 수 있습니다.
지원 폴더 구조 관리, 새 폴더에 대한 지원, 폴더 디렉토리 탐색 지원
업로드의 대화 친절한 적시에 피드백 진행;
보안 서비스 측면이 아닌 JVM 메모리 오버 플로우 기능 원인 업로드 파일이 다른 기능 사용에 영향을주기 때문;
업스트림 대역폭 네트워크의 최대 사용, 업로드 속도를 향상;
분석 :
큰 파일의 경우, 한 시간을 보내기를 읽으면 중 클라이언트 또는 서버 측, 수신, 쉽게 메모리 문제가 발생할 수 있습니다 바람직하지 않다. 그래서 큰 파일 업로드, 잘라 내기 세그먼트를 사용하여 업로드
보기 업로드의 효율성 관점에서 최대의 효율을 달성하기 위해 여러 스레드의 동시 사용을 업로드 할 수 있습니다.
해결 방법 :
파일 업로드의 첫 페이지는 '제 우수한 소프트웨어 up6, 이러한 구성 요소 중 일부는 비동기 업로드 파일, 폴더와 파일 업로드 기능의 기본 매일 요구를 충족하기 위해 같은 바이두 오픈 소스 구성 요소 WebUploader으로 더 유용 업로드 구성 요소의 일부를 사용하도록 선택할 수 있습니다 , 드래그 앤 드롭 업로드, 초에도 큰 파일 HTTP, 전송 큰 파일을 업로드, 업로드 진행 모니터링, 썸네일 파일을 붙여 넣습니다.
첫 번째 단계 :
데이터베이스 구성
프로젝트 데이터베이스 구성은 DBConfig.java 파일에이 파일의 데이터베이스를 구성해야한다.
DBConfig.java 파일에서 제공 MySQL은, SQL 서버, 오라클 구성 정보, 그냥 할 수있는 해당 데이터베이스 구성을 작성하십시오. MySQL은 MySQL 데이터베이스 연결 정보를 사용하는 경우 Oracle 데이터베이스 연결 정보를 입력 오라클을 사용하는 경우에 채우기 위해
업로드 : {uploadLimit : 5, FILESIZELIMIT : 31744, removeTimeout : 0.8}
이 세 변수의 의미로 표현된다 :
uploadLimit가 : 제한 업로드 된 파일의 수를 나타내는 숫자 5는 파일 업로드 제한은 다섯입니다 나타냅니다
FILESIZELIMIT는 : 한계 업로드 파일 크기를 나타내며, 단위는 31M을 표현 31,744킬로바이트 인
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 |
없는 |
찾아보기 버튼의 경로 그림. |
- 버튼 |
'파일 선택' |
찾아보기 버튼을 텍스트. |
checkExisting |
그릇된 |
파일에는 반환 0이없는, 반환이, 파일이 이미 서버 측에 업로드됩니다 존재하는지 확인하기 위해 반복적 인 검사 절차를 업로드 |
디버그 |
그릇된 |
true로 설정하면 디버그 모드가 SWFUpload을 사용했다 |
fileObjName |
'FILEDATA' |
이름이 'the_files이', PHP 프로그램은 $ _FILES를 사용할 수있는 경우 파일 업로드 객체의 이름은 [ 'the_files'] 파일 업로드 개체를 처리합니다. |
FILESIZELIMIT |
0 |
정수가 크기 KB 단위로 표현되는 경우 문자열이 사용될 수있는 경우, 파일 크기 제한을 업로드 (B, KB, MB 또는 GB) 등 '2메가바이트'등의 단위로서; 제한 없음 0으로 설정 한 경우 |
fileTypeDesc |
'모든 파일' |
속성 값은 fileTypeDesc로 설정하면 "RAR 문서의 PDF 파일을 선택하십시오"프롬프트 텍스트 파일 선택 대화 상자를 설정하는 데 사용되는 효과적인 fileTypeExts 등록 후 설정해야합니다 |
fileTypeExts |
'*. *' |
설정은 다음과 같은 파일 형식의 유형을 선택할 수 있습니다 : '* 문서를 * PDF 파일을 * RAR을 ...'. |
에 formdat |
동시에 서버 JSON 형식으로 업로드 된 각 파일에 대해 제출 된 추가 데이터는 동적 'onUploadStart'이벤트를 설정하려면 '설정'을 사용합니다. |
|
신장 |
(30) |
찾아보기 버튼이 기본값의 높이를 설정합니다 |
ItemTemplate을 |
그릇된 |
업로드 HTML 템플릿, 다음 태그 대기열을 설정 : |
방법 |
게시하다 |
가져 오기 또는 우편 제출 |
다중 |
진실 |
true로 설정하면 여러 파일을 업로드 할 수 있습니다. |
overrideEvents |
이벤트를 다시 제공 할 수있는 포맷 JSON 같은 'overrideEvents': 'onUploadProgress'] |
|
preventCaching |
진실 |
true의 경우, 자동마다 추가 예방 URL 캐싱 효과에 임의의 문자열 매개 변수 업로드 파일 업로드 결과의 무리 |
progressData |
'백분율' |
설정 업로드 진행 상황 표시, 업로드의 비율을 보여줍니다 비율, 속도, 업로드 속도 표시 |
queueID |
그릇된 |
설정 업로드 큐 컨테이너 DOM 요소의 ID, 거짓 경우 자동으로 큐 컨테이너를 생성합니다. |
queueSizeLimit |
999 |
선택한 파일 수가이 제한을 초과하면 작업 대기열 디스플레이의 최대 수는, onSelectError 이벤트를 시작합니다. |
removeCompleted |
진실 |
이 False로 설정이이 작업 표시 남아있는 경우 자동으로 대기열에서 삭제 작업을 완료 여부. |
removeTimeout |
삼 |
작업이 완료된 후에 세트가 대기열에서 자동으로 제거 된 경우, 종료 구간에서 삭제하기 위해 제공 될 수있다. |
requeueErrors |
그릇된 |
true로 설정하면 업로드는 하나의 작업이 오류를 반환 실패하고 태스크 큐에 다시 가입 업로드 할 수 있습니다. |
successTimeout |
(30) |
파일 업로드에 성공한 서버가 성공 플래그를 반환해야합니다 후, 결과 세트는 타임 아웃을 반환 |
SWF |
'uploadify.swf' |
상대 경로 uploadify.swf 파일. |
업 로더 |
uploadify.php |
상대 경로 배경 처리 프로그램. |
uploadLimit |
999 |
업로드 된 파일의 최대 수에 도달하거나 경우이 제한 onUploadError 이벤트를 트리거 초과했습니다. |
폭 |
(120) |
버튼의 설정 파일 브라우저의 폭입니다. |
단계 :
后端修改
项目采用的最简单的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