Gunakan plupload JS untuk memuat naik terus imej dalam kelompok ke kemahiran Youpai Cloud_javascript

Forum atau bar siaran selalunya perlu berkongsi banyak gambar Cara yang lebih teruk untuk memuat naik gambar adalah dengan memuat naiknya ke pelayan pusat, dan kemudian pelayan pusat memajukannya ke pelayan gambar statik. Artikel ini akan memperkenalkan cara menggunakan plupload untuk mengoptimumkan proses muat naik dan terus memuat naik imej dalam kelompok ke Youpai Cloud, memintas pelayan. Artikel ini akan menumpukan pada perkara utama berikut:

Salin kod Kod adalah seperti berikut:

plupload perpustakaan
Pemampatan tempatan imej
Pelbagai pilihan gambar
Pintas pelayan dan muat naik terus gambar secara berkelompok ke Youpai Cloud
Gunakan API Borang HTTP Youpai
konfigurasi plupload

plupload perpustakaan

plupload ialah pemalam muat naik imej yang sangat kaya. Muat naik kelompok boleh disokong melalui Flash/Silverligh/html4 untuk penyemak imbas versi yang lebih rendah, manakala untuk penyemak imbas versi yang lebih tinggi, antara muka HTML5 akan digunakan terlebih dahulu untuk memuat naik Semua penentuan ini adalah automatik, dan ia boleh dikatakan sangat mudah untuk digunakan ! Kedua, plupload juga menyokong fungsi seperti memampatkan imej pada bahagian klien dan terus muat naik Drag & Drop Untuk maklumat lanjut, anda boleh pergi ke laman web rasminya untuk maklumat lanjut.

Di sini kami hanya menggunakan API terasnya dan hanya perlu memperkenalkan fail.

Salin kod Kod adalah seperti berikut:

Contoh API teras rasmi adalah sangat mudah, anda boleh terus pergi ke http://www.plupload.com/examples/core untuk melihatnya. Tiada kesukaran untuk memahami API teras Jika anda memerlukan bantuan, anda boleh bertanya soalan kepada saya kemudian dalam artikel ini.

Mampatan setempat imej

Umumnya, kualiti gambar yang dilihat di web adalah tidak tinggi. Saya masih ingat semasa saya belajar PS di sekolah menengah, cikgu mengatakan bahawa resolusi gambar dalam talian harus ditetapkan kepada 72, dan untuk gambar yang dicetak, ia harus. ditetapkan kepada 300. Oleh itu, apabila pengguna memuat naik foto yang besar, pendekatan yang lebih baik adalah untuk pelanggan pengguna memampatkan imej secara setempat dan memuat naik imej yang lebih kecil yang dimampatkan, yang tidak menjejaskan kesan penyemakan imbas dan juga boleh mempercepatkan kelajuan muat naik, mengurangkan beban pada pelayan.

Fungsi pemampatan setempat bagi imej disokong dalam plupload Hanya masukkan parameter ubah saiz apabila memulakannya. Antaranya, lebar dan ketinggian boleh ditetapkan mengikut keadaan sebenar, dan kualiti adalah parameter yang lebih penting Seperti namanya, semakin kecil nilai yang ditetapkan, semakin kecil gambar, tetapi kualiti paparan akan menjadi lebih teruk. Anda perlu menimbang ini sendiri.

Salin kod Kod adalah seperti berikut:

{
"ubah saiz": {
"lebar": 200,
"tinggi": 200,
"kualiti": 70
}
}

Pelbagai pilihan gambar

Prasyarat untuk memuat naik imej secara berkelompok ialah keupayaan untuk memilih berbilang imej. Fail berbilang pilihan ialah ciri standard HTML5 Kami boleh mendayakan mod berbilang pilihan dengan cara berikut:

Salin kod Kod adalah seperti berikut:

Pilih imej:

Menurut bahagian pemilihan Fail Berbilang sokongan penyemak imbas pemalam jquery jQuery-File-Upload yang sangat baik, IE baru sahaja mula menyokong ciri HTML5 ini sehingga IE10, jadi kami perlu menggunakan Flash The magic power untuk menyokong pemilihan imej berbilang dalam pelayar versi lebih rendah. Nasib baik, plupload telah melakukan ini untuk kami, dan suis ini didayakan secara lalai. Jika anda rasa anda tidak perlu menggunakan imej berbilang pilihan, anda boleh menetapkan multi_selection: false untuk mematikan ciri ini.

Memintas pelayan dan memuat naik terus gambar ke Youpai Cloud secara berkelompok

Youpaiyun menyediakan API Borang HTTP. Melalui antara muka ini, kami secara langsung boleh memulakan permintaan untuk memuat naik imej daripada penyemak imbas tanpa perlu memindahkannya melalui pelayan kami sendiri, yang sangat mengurangkan kos overhed.

Gunakan API Borang HTTP Youpai

Untuk menggunakan antara muka ini, anda perlu menghantar borang kepada Youpaiyun. Borang ini mengandungi fail yang ingin anda muat naik, dan juga perlu menyertakan dasar dan tandatangan. Dasar digunakan untuk menetapkan parameter berkaitan permintaan muat naik, seperti laluan storan, jenis fail, hasil prapemprosesan, dsb. Selain itu, ia juga termasuk masa pemberian permintaan muat naik, dsb. Tandatangan digunakan untuk pengesahan keselamatan.

Untuk kemudahan demonstrasi, javascript digunakan secara langsung untuk menjana Polisi dan Tandatangan. Tetapi dalam penggunaan sebenar, atas sebab keselamatan, sila lengkapkan proses ini di bahagian pelayan. Kod berikut telah diubah suai sedikit berdasarkan demo rasmi, terutamanya menggunakan akaun ujian rasmi Untuk kaedah penjanaan khusus kedua-dua parameter ini, sila rujuk dokumentasi rasmi: http://docs.upyun com/. api/form_api/.

Salin kod Kod adalah seperti berikut:

pilihan var = {
'baldi': 'demonstrasi',
'save-key': '/test/filename.txt',
'tamat tempoh': Math.floor(new Date().getTime() / 1000) 86400
};
// Lihat lebih banyak parameter: http://docs.upyun.com/api/form_api/#Pengenalan antara muka API Borang
var policy = window.btoa(JSON.stringify(options));
// Dapatkan API borang daripada latar belakang pengurusan pengguna UPYUN
var form_api_secret = '1 JY2ZqD5UVfw6hQ8EesYQO50Wo=';
// Kira tandatangan
var signature = md5(dasar '&' form_api_secret);

konfigurasi plupload

Cara membuat plupload berfungsi dengan API Borang HTTP Youpaiyun benar-benar membuat saya sakit kepala. Semasa melihat dokumentasi plupload, saya secara tidak sengaja mendapati bahawa pautan ke Muat Naik ke Amazon S3 menarik saya. Nama penuh Amazon S3 ialah Amazon Simple Storage Service Perkhidmatan storan awan yang disediakannya adalah lebih kurang sama dengan Youpaiyun.

Jadi berdasarkan pengenalan konfigurasi sisi penyemak imbas dalam artikel ini, saya mengetahui konfigurasi yang diperlukan untuk memuat naik ke Youpaiyun. Sebenarnya, sangat mudah untuk mengatakan, perkara utama ialah mengkonfigurasi dua parameter url dan multipart_params. Dalam contoh berikut, options.baldi, dasar dan tandatangan secara langsung menggunakan nilai yang dikira dalam bahagian sebelumnya.

Salin kod Kod adalah seperti berikut:

var pemuat naik = plupload baharu.Pemuat naik({
...
url: 'http://v0.api.upyun.com/' options.bucket,
Multipart_params: {
          'Nama fail': '${filename}', // menambah ini untuk mengekalkan konsistensi sepanjang masa jalan
         'Jenis Kandungan': '',
        'dasar': dasar,
        'tandatangan': tandatangan,
},
...
});

Ringkasan

Dengan cara ini, saya akhirnya mencapai keupayaan untuk memintas pelayan melalui plupload dan muat naik imej secara berkelompok ke Youpai Cloud. plupload benar-benar perpustakaan yang sangat berkuasa, tetapi ia memerlukan bayaran untuk kegunaan komersial Sila pergi ke laman web rasminya untuk mengetahui lebih lanjut!

Bukankah ia sangat mudah? Sebab utamanya ialah idea itu sangat bagus dan berbaloi untuk dipelajari Jika anda mempunyai sebarang soalan, sila tinggalkan mesej dengan saya dan kita boleh membuat kemajuan bersama