포럼이나 포스트 바는 종종 많은 사진을 공유해야합니다. 사진을 업로드하는 열악한 방법은 사진을 중앙 서버에 업로드 한 다음 정적 이미지 서버로 전달하는 것입니다. 이 기사에서는 plupload를 사용하여 업로드 프로세스를 최적화하고 서버를 우회하여 YouPai Cloud에 배치로 사진을 직접 업로드하는 방법을 소개합니다. 이 기사는 다음과 같은 핵심 사항에 대해 이야기합니다.
코드 사본은 다음과 같습니다.
Plupload 라이브러리
사진의 로컬 압축
여러 선택 사진
서버를 우회하고 사진을 YouPaiyun에 직접 업로드하십시오
HTTP 양식 API 사용
plupload 구성
Plupload 라이브러리
Plupload는 매우 풍부한 이미지 업로드 플러그인입니다. 저급 브라우저는 Flash/Silverlight/HTML4를 통해 배치 업로드를 지원할 수 있지만, 고급 브라우저에서는 HTML5 인터페이스를 사용하여 업로드하는 데 우선 순위가 부여됩니다. 이 모든 것이 자동이며 사용하기가 매우 편리하다고 말할 수 있습니다! 둘째, PlUpload는 클라이언트의 이미지를 압축하고 드래그 앤 드롭에서 직접 업로드하는 것과 같은 기능도 지원합니다. 자세한 내용은 공식 웹 사이트를 방문하여 자세한 정보를 얻을 수 있습니다.
여기서는 핵심 API 만 사용하여 파일 만 소개합니다.
코드 사본은 다음과 같습니다.
<script src = "lib/plupload-2.1.2/js/plupload.full.min.js"> </script>
공무원이 제공 한 핵심 API 예제는 매우 간단합니다. http://www.plupload.com/examples/core에서 직접 볼 수 있습니다. 핵심 API를 이해하는 데 어려움이 없습니다. 도움이 필요하면이 기사의 뒷부분에 질문을 할 수 있습니다.
사진의 로컬 압축
일반적으로 웹 페이지에서 탐색하는 사진의 품질은 높지 않습니다. 고등학교에서 PS를 공부할 때 교사는 온라인 사진의 해상도가 72 세가 될 것이라고 말했습니다. 따라서 사용자가 큰 사진을 업로드 할 때는 사용자의 클라이언트에서 로컬로 이미지를 압축하는 것이 좋습니다. 이는 작은 사진에 이미지를 압축하는 것이 좋습니다.
이미지의 로컬 압축 기능은 plupload에서 지원되며 초기화 할 때 크기 조정 매개 변수를 전달합니다. 그중에서도 실제 상황에 따라 너비와 높이를 설정할 수 있으며 품질은 비교적 중요한 매개 변수입니다. 이름에서 알 수 있듯이 값이 적을수록 그림이 작을수록 디스플레이 품질이 악화됩니다. 당신은 이것을 직접 무게를 측정해야합니다.
코드 사본은 다음과 같습니다.
{
"크기 조정": {
"너비": 200,
"높이": 200,
"품질": 70
}
}
여러 선택 사진
그림의 배치 업로드를위한 전제 조건 중 하나는 여러 사진을 선택하는 기능입니다. 다중 선택 파일은 HTML5의 표준 기능입니다. 다음 방법으로 다중 선택 모드를 활성화 할 수 있습니다.
코드 사본은 다음과 같습니다.
<form action = "xxx">
이미지 선택 : <input type = "file"name = "img"multuption> <!- 다중은 여기에서 키입니다! ->
<입력 유형 = "제출">
</form>
JQuery-File-Upload의 브라우저 지원에서 다중 파일 선택 섹션에 따르면, IE는 IE10까지 HTML5 기능을 지원하기 시작한 IE10까지 개발되었으므로 플래시의 마법 전력을 사용하여 더 낮은 버전 브라우저의 다중 선택 이미지를 지원해야합니다. 다행히도 Plupload는이 작업을 수행하는 데 도움이 되었으며이 스위치는 기본적으로 켜집니다. 다중 선택 이미지를 사용할 필요가 없다고 생각되면 Multi_Selection : False를 설정 하여이 기능을 끄십시오.
서버를 우회하고 사진을 YouPaiyun에 직접 업로드하십시오
YouPaiyun은 HTTP 양식 API를 제공합니다. 이 인터페이스를 통해 자체 서버를 통해 전송하지 않고도 브라우저에서 이미지 업로드 요청을 직접 시작하여 오버 헤드가 크게 줄어 듭니다.
HTTP 양식 API 사용
이 인터페이스를 사용하면 YouPaiyun에 양식을 보내야합니다. 이 양식에는 업로드 할 파일이 포함되어 있으며 정책 및 서명도 포함해야합니다. 정책은 저장 경로, 파일 유형, 전처리 결과 등과 같은 업로드 요청과 관련된 매개 변수를 전송하는 데 사용되며 업로드 요청 보조금 시간 등도 포함됩니다. 서명은 보안 검증에 사용됩니다.
시연 편의를 위해 JavaScript를 직접 사용하여 여기에서 정책과 서명을 생성합니다. 그러나 실제로 사용하면 보안상의 이유로 서버 측 에서이 프로세스를 완료하십시오. 다음 코드는 공식 테스트 계정을 사용하여 공식 데모를 기반으로 수정되었습니다. 이 두 매개 변수의 특정 생성 방법은 공식 문서를 참조하십시오 : http://docs.upyun.com/api/form_api/.
코드 사본은 다음과 같습니다.
var 옵션 = {
'버킷': '데모',
'save-key': '/test/filename.txt',
'만료': math.floor (new date (). gettime () / 1000) + 86400
};
// 더 많은 매개 변수를 참조하십시오 : http://docs.upyun.com/api/form_api/#form api 인터페이스 소개
var policy = window.btoa (json.stringify (옵션));
// UPYUN 사용자 관리 백엔드에서 양식 API를 가져옵니다
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
// 서명을 계산합니다
var signature = md5 (정책 + '&' + form_api_secret);
plupload 구성
YouPaiyun의 HTTP 양식 API와 함께 plupload를 작동시키는 방법은 실제로 두통을주었습니다. Plupload를보고있는 문서에서 예상치 못한 발견은 새벽을 보게 만들었습니다. Amazon S3에 대한 링크 업로드가 저를 끌어 들였습니다. Amazon S3의 전체 이름은 Amazon Simple Storage Service이며 제공하는 클라우드 스토리지 서비스는 YouPaiyun의 클라우드 스토리지 서비스와 다소 유사합니다.
따라서이 기사에서 브라우저 구성 소개를 기반으로 YouPaiyun에 업로드하는 데 필요한 구성을 알아 냈습니다. 실제로, 주로 두 매개 변수 URL과 multipart_params를 구성하는 것은 매우 간단합니다. 다음 예제의 옵션, Bucket, 정책 및 서명은 이전 섹션의 값을 계산하는 데 직접 사용됩니다.
코드 사본은 다음과 같습니다.
var 업 로더 = 새로운 plupload.uploader ({
...
URL : 'http://v0.api.upyun.com/' + 옵션 .bucket,
multipart_params : {
'filename': '$ {filename}', // runtimes에서 일관성을 유지하기 위해 이것을 추가합니다.
'콘텐츠 유형': '',
'정책': 정책,
'서명': 서명,
},
...
});
요약
이런 식으로, 우리는 마침내 Plupload를 통해 서버를 우회하고 YouPaiyun에 배치로 사진을 업로드한다는 것을 깨달았습니다. Plupload는 실제로 매우 강력한 라이브러리이지만 상업용 용도로 청구 할 수 있습니다. 자세한 내용은 공식 웹 사이트로 이동하십시오!
매우 간단하지 않습니까? 가장 중요한 것은 아이디어가 매우 좋고 학습 할 가치가 있다는 것입니다. 질문이 있으시면 메시지를 남겨 주시면 모두가 함께 진행할 것입니다.