ฟอรัมหรือโพสต์บาร์มักจะต้องแบ่งปันรูปภาพจำนวนมาก วิธีที่ไม่ดีในการอัปโหลดรูปภาพคือการอัปโหลดไปยังเซิร์ฟเวอร์กลางจากนั้นส่งต่อไปยังเซิร์ฟเวอร์ภาพคงที่ บทความนี้แนะนำวิธีใช้ Plupload เพื่อเพิ่มประสิทธิภาพกระบวนการอัปโหลดและข้ามเซิร์ฟเวอร์เพื่ออัปโหลดรูปภาพในแบทช์ไปยังคลาวด์ YouPai โดยตรง บทความนี้จะพูดถึงประเด็นสำคัญต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
ห้องสมุด Plupload
การบีบอัดรูปภาพในท้องถิ่น
รูปภาพหลายภาพ
ข้ามเซิร์ฟเวอร์และอัปโหลดรูปภาพโดยตรงไปยัง YouPaiyun
ใช้ API แบบฟอร์ม HTTP
การกำหนดค่า 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 และภาพที่พิมพ์จะต้องเป็น 300 ดังนั้นเมื่อผู้ใช้อัปโหลดรูปภาพขนาดใหญ่จะดีกว่าที่จะใช้เพื่อบีบอัดภาพบนลูกค้าของผู้ใช้
ฟังก์ชั่นการบีบอัดในท้องถิ่นของภาพได้รับการสนับสนุนใน plupload เพียงส่งผ่านในพารามิเตอร์การปรับขนาดเมื่อเริ่มต้นมัน ในหมู่พวกเขาความกว้างและความสูงสามารถตั้งค่าตามสถานการณ์จริงและคุณภาพเป็นพารามิเตอร์ที่ค่อนข้างสำคัญ ตามชื่อที่แนะนำค่าที่เล็กกว่าจะถูกตั้งค่าภาพที่เล็กลง แต่ยิ่งคุณภาพการแสดงผลจะแย่ลงเท่านั้น คุณต้องชั่งน้ำหนักด้วยตัวเอง
การคัดลอกรหัสมีดังนี้:
-
"ปรับขนาด": {
"ความกว้าง": 200,
"ความสูง": 200,
"คุณภาพ": 70
-
-
รูปภาพหลายภาพ
หนึ่งในข้อกำหนดเบื้องต้นสำหรับการอัพโหลดแบทช์ของรูปภาพคือความสามารถในการเลือกรูปภาพหลายภาพ ไฟล์หลายตัวเลือกเป็นคุณสมบัติมาตรฐานของ HTML5 เราสามารถเปิดใช้งานโหมดหลายแบบเลือกได้ในรูปแบบต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
<form action = "xxx">
เลือกรูปภาพ: <อินพุต type = "file" name = "img" หลาย multiple> <!- หลายคีย์ที่นี่! -
<อินพุต type = "ส่ง">
</form>
ตามส่วนการเลือกไฟล์หลายไฟล์ในการสนับสนุนเบราว์เซอร์ของ jQuery-file-upload, IE ได้พัฒนาจนกระทั่ง IE10 ที่เพิ่งเริ่มรองรับคุณสมบัติ HTML5 ดังนั้นเราต้องใช้พลังเวทย์มนตร์ของแฟลชเพื่อรองรับภาพหลายตัวเลือกสำหรับเบราว์เซอร์รุ่นล่าง โชคดีที่ Plupload ได้ช่วยเราทำสิ่งนี้และสวิตช์นี้จะเปิดขึ้นตามค่าเริ่มต้น หากคุณคิดว่าคุณไม่จำเป็นต้องใช้รูปภาพที่เลือกหลายภาพคุณสามารถตั้งค่า multi_selection: False เพื่อปิดคุณสมบัตินี้
ข้ามเซิร์ฟเวอร์และอัปโหลดรูปภาพโดยตรงไปยัง YouPaiyun
Youpaiyun จัดเตรียม API แบบฟอร์ม HTTP ผ่านอินเทอร์เฟซนี้เราสามารถเริ่มต้นคำขออัปโหลดภาพจากเบราว์เซอร์ได้โดยตรงโดยไม่ต้องถ่ายโอนผ่านเซิร์ฟเวอร์ของเราเองซึ่งจะช่วยลดค่าใช้จ่ายได้อย่างมาก
ใช้ API แบบฟอร์ม HTTP
การใช้อินเทอร์เฟซนี้คุณต้องส่งแบบฟอร์มไปยัง YouPaiyun แบบฟอร์มนี้มีไฟล์ที่คุณต้องการอัปโหลดและยังต้องรวมนโยบายและลายเซ็น นโยบายใช้ในการถ่ายโอนพารามิเตอร์ที่เกี่ยวข้องกับการอัพโหลดคำขอเช่นการบันทึกเส้นทางประเภทไฟล์ผลการประมวลผลล่วงหน้า ฯลฯ และยังรวมถึงเวลาการอัพโหลดคำขอเวลาให้ทุน ฯลฯ ลายเซ็นใช้สำหรับการตรวจสอบความปลอดภัย
เพื่อความสะดวกในการสาธิตเราใช้ JavaScript โดยตรงเพื่อสร้างนโยบายและลายเซ็นที่นี่ แต่ในการใช้งานจริงเพื่อเหตุผลด้านความปลอดภัยโปรดดำเนินการตามกระบวนการนี้ทางฝั่งเซิร์ฟเวอร์ รหัสต่อไปนี้ได้รับการแก้ไขตามการสาธิตอย่างเป็นทางการส่วนใหญ่ใช้บัญชีทดสอบอย่างเป็นทางการ สำหรับวิธีการสร้างเฉพาะของพารามิเตอร์ทั้งสองนี้โปรดดูเอกสารอย่างเป็นทางการ: http://docs.upyun.com/api/form_api/
การคัดลอกรหัสมีดังนี้:
ตัวเลือก var = {
'ถัง': 'สาธิต',
'save-key': '/test/filename.txt',
'หมดอายุ': Math.Floor (วันที่ใหม่ (). getTime () / 1000) + 86400
-
// ดูพารามิเตอร์เพิ่มเติม: http://docs.upyun.com/api/form_api/#form API Interface Intretuction
นโยบาย var = window.btoa (json.stringify (ตัวเลือก));
// รับฟอร์ม API จากแบ็กเอนด์การจัดการผู้ใช้ UPYUN
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
// คำนวณลายเซ็น
var signature = md5 (นโยบาย + '&' + form_api_secret);
การกำหนดค่า plupload
วิธีทำให้ plupload ทำงานกับ HTTP แบบฟอร์ม HTTP ของ Youpaiyun ทำให้ฉันปวดหัวจริงๆ ในเอกสารที่ดู plupload การค้นพบที่ไม่คาดคิดทำให้ฉันเห็นรุ่งอรุณ ลิงค์อัปโหลดไปยัง Amazon S3 ดึงดูดฉัน ชื่อเต็มของ Amazon S3 คือบริการจัดเก็บข้อมูลง่าย ๆ ของ Amazon และบริการจัดเก็บข้อมูลบนคลาวด์ที่มีให้มากหรือน้อยกว่าของ Youpaiyun
ดังนั้นจากการแนะนำการกำหนดค่าเบราว์เซอร์ในบทความนี้ฉันคิดว่าการกำหนดค่าที่จำเป็นในการอัปโหลดไปยัง Youpaiyun ในความเป็นจริงมันง่ายมากที่จะพูดส่วนใหญ่การกำหนดค่า URL พารามิเตอร์สองตัวและ multipart_params ตัวเลือก Bucket นโยบายและลายเซ็นในตัวอย่างต่อไปนี้ใช้โดยตรงเพื่อคำนวณค่าในส่วนก่อนหน้า
การคัดลอกรหัสมีดังนี้:
var uploader = new plupload.uploader ({
-
URL: 'http://v0.api.upyun.com/' + ตัวเลือก Bucket,
multipart_params: {
'filename': '$ {filename}', // การเพิ่มสิ่งนี้เพื่อรักษาความสอดคล้องในรันไทม์
'ประเภทเนื้อหา': '',
'นโยบาย': นโยบาย
'ลายเซ็น': ลายเซ็น
-
-
-
สรุป
ด้วยวิธีนี้ในที่สุดเราก็ตระหนักว่าการข้ามเซิร์ฟเวอร์ผ่าน plupload และอัปโหลดรูปภาพในแบทช์ไปยัง Youpaiyun Plupload เป็นห้องสมุดที่ทรงพลังมาก แต่สามารถเรียกเก็บเงินจากการใช้งานเชิงพาณิชย์ได้ โปรดไปที่เว็บไซต์อย่างเป็นทางการเพื่อเรียนรู้เพิ่มเติม!
มันไม่ง่ายมากเหรอ? สิ่งสำคัญคือความคิดนั้นดีมากและคุ้มค่ากับการเรียนรู้ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและทุกคนจะก้าวหน้าไปด้วยกัน