JS plupload를 사용하여 이미지를 일괄적으로 Youpai Cloud_javascript 기술에 직접 업로드하세요.

포럼이나 포스트바에서는 사진을 많이 공유해야 하는 경우가 많습니다. 사진을 업로드하는 가장 나쁜 방법은 사진을 중앙 서버에 업로드한 다음 중앙 서버에서 정적 사진 서버로 전달하는 것입니다. 이 기사에서는 plupload를 사용하여 업로드 프로세스를 최적화하고 서버를 우회하여 Youpai Cloud에 이미지를 일괄 업로드하는 방법을 소개합니다. 이 기사에서는 다음 핵심 사항을 중점적으로 다룹니다.

코드 복사 코드는 다음과 같습니다.

plupload 라이브러리
이미지의 로컬 압축
다양한 사진 선택
서버를 우회하고 Youpai Cloud에 사진을 일괄 업로드하세요
Youpai의 HTTP FORM API 사용
플러스로드 구성

라이브러리 업로드

plupload는 매우 풍부한 이미지 업로드 플러그인입니다. 낮은 버전의 브라우저에서는 Flash/Silverligh/html4를 통해 일괄 업로드를 지원할 수 있지만, 상위 버전의 브라우저에서는 HTML5 인터페이스를 먼저 사용하여 업로드를 결정하므로 사용이 매우 편리하다고 할 수 있습니다! 둘째, plupload는 클라이언트에서 이미지를 압축하고 직접 Drag&Drop하여 업로드하는 등의 기능도 지원합니다. 자세한 내용은 공식 웹사이트를 참조하세요.

여기에서는 핵심 API만 사용하고 파일만 도입하면 됩니다.

코드 복사 코드는 다음과 같습니다.

공식 핵심 API 예제는 매우 간단합니다. http://www.plupload.com/examples/core로 직접 이동하여 볼 수 있습니다. 핵심 API를 이해하는 데 어려움이 없습니다. 도움이 필요하면 이 문서의 뒷부분에서 질문할 수 있습니다.

이미지 로컬 압축

일반적으로 웹에서 보는 사진의 품질은 높지 않습니다. 고등학교 때 PS를 배울 때 선생님께서 온라인 사진의 해상도는 72로 설정하고 인쇄된 사진은 72로 설정해야 한다고 말씀하셨던 기억이 납니다. 300으로 설정합니다. 따라서 사용자가 큰 사진을 업로드할 때 사용자의 클라이언트가 로컬에서 이미지를 압축하고 압축된 작은 이미지를 업로드하는 것이 더 나은 접근 방식입니다. 이는 검색 효과에 영향을 주지 않고 업로드 속도도 높여 부담을 줄일 수 있습니다. 서버에서.

이미지의 로컬 압축 기능은 plupload에서 지원됩니다. 초기화할 때 크기 조정 매개변수를 전달하면 됩니다. 그 중 너비와 높이는 실제 상황에 따라 설정할 수 있으며 품질이 더 중요한 매개 변수입니다. 이름에서 알 수 있듯이 값을 작게 설정할수록 그림은 작아지지만 표시 품질은 나빠집니다. .이것을 직접 측정해야 합니다.

코드 복사 코드는 다음과 같습니다.

{
"크기 조정": {
"너비": 200,
"높이": 200,
"품질": 70
}
}

다양한 사진 선택

이미지 일괄 업로드의 전제 조건은 여러 이미지를 선택할 수 있는 기능입니다. 다중 선택 파일은 HTML5의 표준 기능입니다. 다음과 같은 방법으로 다중 선택 모드를 활성화할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

이미지 선택:

양식>

매우 뛰어난 jquery 플러그인 jQuery-File-Upload의 브라우저 지원에 있는 다중 파일 선택 섹션에 따르면 IE는 IE10까지 이 HTML5 기능을 이제 막 지원하기 시작했기 때문에 Flash를 사용해야 합니다. 하위 버전 브라우저에서 여러 이미지 선택을 지원합니다. 다행히도 plupload는 이미 이 작업을 수행했으며 이 스위치는 기본적으로 활성화되어 있습니다. 다중 선택 이미지를 사용할 필요가 없다고 생각되면 multi_selection: false를 설정하여 이 기능을 끌 수 있습니다.

서버를 우회하고 Youpai Cloud에 사진을 일괄 업로드하세요

Youpaiyun은 HTTP FORM API를 제공합니다. 이 인터페이스를 통해 자체 서버를 거치지 않고도 브라우저에서 이미지 업로드 요청을 직접 시작할 수 있으므로 오버헤드가 크게 줄어듭니다.

Youpai의 HTTP FORM API 사용

이 인터페이스를 사용하려면 Youpaiyun에 양식을 보내야 합니다. 이 양식에는 업로드하려는 파일이 포함되어 있으며 정책 및 서명도 포함해야 합니다. 정책은 저장 경로, 파일 형식, 전처리 결과 등 업로드 요청 관련 매개 변수를 설정하는 데 사용됩니다. 또한 업로드 요청 승인 시간 등도 포함됩니다. 서명은 보안 확인을 위해 사용됩니다.

시연의 편의를 위해 정책 및 서명 생성에는 javascript를 직접 사용했습니다. 하지만 실제 사용 시에는 보안상의 이유로 서버 측에서 이 과정을 완료해 주시기 바랍니다. 다음 코드는 공식 데모를 기반으로 약간 수정되었으며, 주로 공식 테스트 계정을 사용하여 이 두 매개변수의 구체적인 생성 방법은 공식 문서를 참조하세요: http://docs.upyun. api/form_api/.

코드 복사 코드는 다음과 같습니다.

var 옵션 = {
'버킷': '시연',
'저장 키': '/test/filename.txt',
'만료': Math.floor(new Date().getTime() / 1000) 86400
};
// 더 많은 매개변수 보기: http://docs.upyun.com/api/form_api/#Form API 인터페이스 소개
var 정책 = window.btoa(JSON.stringify(옵션));
// UPYUN 사용자 관리 백그라운드에서 양식 API 가져오기
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// 서명 계산
var 서명 = md5(정책 '&' form_api_secret);

추가 구성

Youpaiyun의 HTTP FORM API를 사용하여 plupload를 작동시키는 방법은 정말 머리가 아프네요. plupload 문서를 보는 동안 우연히 Amazon S3에 업로드 링크가 마음에 들었다는 사실을 발견했습니다. Amazon S3의 전체 이름은 Amazon Simple Storage Service입니다. 제공되는 클라우드 스토리지 서비스는 Youpaiyun과 거의 유사합니다.

그래서 이번 글의 브라우저 측 구성 소개를 바탕으로 Youpaiyun에 업로드하는 데 필요한 구성을 알아냈습니다. 사실, 말은 매우 간단합니다. 가장 중요한 것은 url과 multipart_params의 두 매개변수를 구성하는 것입니다. 다음 예에서는 options.bucket, 정책, 서명이 이전 섹션에서 계산된 값을 직접 사용합니다.

코드 복사 코드는 다음과 같습니다.

var 업로더 = 새로운 plupload.Uploader({
...
URL: 'http://v0.api.upyun.com/' options.bucket,
Multipart_params: {
          'Filename': '${filename}', // 런타임 전반에 걸쳐 일관성을 유지하기 위해 이를 추가합니다
         '콘텐츠 유형': '',
        '정책': 정책,
        '서명': 서명,
},
...
});

요약

이런 식으로 드디어 plupload를 통해 서버를 우회하고 Youpai Cloud에 이미지를 일괄 업로드하는 기능을 달성했습니다. plupload는 실제로 매우 강력한 라이브러리이지만 상업적으로 사용하려면 요금이 필요합니다. 자세한 내용은 공식 웹사이트를 참조하세요!

아주 간단하지 않나요? 주된 이유는 아이디어가 매우 좋고 배울 가치가 있기 때문입니다. 궁금한 점이 있으면 메시지를 남겨주시면 함께 진행하겠습니다.