試析圖片上傳及顯示在電子商務(wù)中的應(yīng)用

摘要：電子商務(wù)中圖片得到廣泛地應(yīng)用，圖片的上傳和顯示涉及到很多細(xì)節(jié)上的技術(shù)問(wèn)題。文章嘗試從多個(gè)方面去分析該類問(wèn)題并給出一些解決方案。

關(guān)鍵詞：圖片上傳；電子商務(wù)

一、背景

電子商務(wù)是近一二十年來(lái)發(fā)展最為迅猛的一個(gè)產(chǎn)業(yè)。電子商務(wù)網(wǎng)站的建設(shè)是電子商務(wù)所涉及到的一個(gè)重要的組成部分。在電子商務(wù)網(wǎng)站的建設(shè)過(guò)程中，我們經(jīng)常需要上傳一些圖片，并將上傳的圖片顯示在各種不同的電子媒體（如手機(jī)、平板、電腦）上。圖片在上傳和顯示的過(guò)程中，作為軟件開(kāi)發(fā)人員可能會(huì)考慮到以下幾個(gè)問(wèn)題：

（一）圖片如何從客戶端上傳到服務(wù)器。

（二）圖片上傳到服務(wù)器如何存儲(chǔ)。

（三）圖片上傳后如何實(shí)現(xiàn)頁(yè)面的局部更新。

（四）圖片上傳后如何實(shí)現(xiàn)更新和刪除。

（五）圖片上傳過(guò)程中和顯示時(shí)如何提高系統(tǒng)的性能。

二、圖片的上傳及顯示

（一）圖片從客戶端上傳到服務(wù)器。圖片從客戶端上傳到服務(wù)器一種方式是使用成熟的組件，另一種方式是使用流。

使用成熟的組件一般情況下通過(guò)選擇本地圖片文件，然后選擇后臺(tái)服務(wù)上傳或直接上傳。這種方式編寫的代碼很少，但是使用這種方式文件的存儲(chǔ)方式、顯示方式都有可能受到很大的限制。

使用流的方式則編寫的代碼相對(duì)較多，但更靈活。可以選擇本地圖片文件讀取，使用輸入流將其讀入到內(nèi)存，接著使用輸出流傳給服務(wù)器的后臺(tái)服務(wù)。后臺(tái)服務(wù)獲得網(wǎng)絡(luò)輸入流讀入到內(nèi)存后，使用輸出流以合適的方式存儲(chǔ)下來(lái)。

（二）圖片文件存儲(chǔ)到服務(wù)器。圖片文件存儲(chǔ)有兩個(gè)方面的問(wèn)題需要考慮：一是存儲(chǔ)到哪兒？二是是否使用壓縮？

圖片文件可以存儲(chǔ)到數(shù)據(jù)庫(kù)，也可以單獨(dú)以文件存儲(chǔ)。存儲(chǔ)在數(shù)據(jù)庫(kù)中，文件太大，一條記錄一般只能存儲(chǔ)一個(gè)圖片，傳輸多張圖片一般需要多條記錄。以單獨(dú)的文件存儲(chǔ)時(shí)，文件存儲(chǔ)的位置、文件名及文件存儲(chǔ)的類型還是需要保存到數(shù)據(jù)庫(kù)中。為了減少圖片文件的存儲(chǔ)空間，可以采用適當(dāng)?shù)膲嚎s技術(shù)，需要說(shuō)明的是，圖片壓縮一般壓縮效果不太明顯。

（三）圖片上傳后實(shí)現(xiàn)頁(yè)面的局部更新。圖片上傳后需要顯示在媒體的界面上，如果更新整個(gè)界面會(huì)帶來(lái)兩個(gè)問(wèn)題。一個(gè)問(wèn)題是界面的其他數(shù)據(jù)也可能會(huì)被破壞，另一個(gè)是整個(gè)界面的更新需要傳輸更多的數(shù)據(jù)。所以圖片上傳后應(yīng)該實(shí)現(xiàn)頁(yè)面的局部更新。解決頁(yè)面的局部更新有很多種方法，一種方法是將圖片放在框架中，更新頁(yè)面時(shí)，只更新該框架。另一種方法則是使用AJAX技術(shù)實(shí)現(xiàn)頁(yè)面的局部更新。相對(duì)于前一種方法，后一種方法代碼更簡(jiǎn)單，效率更高。

（四）圖片上傳后實(shí)現(xiàn)更新和刪除。圖片上傳后的更新和刪除同數(shù)據(jù)庫(kù)記錄的更新和刪除有相似之處，但又完全不同。刪除圖片不僅要包括刪除記錄中圖片的文件存儲(chǔ)的路徑和文件名，還要?jiǎng)h除實(shí)際的圖片文件。圖片的更新包括三個(gè)階段：第一個(gè)階段為舊圖片文件的刪除，第二個(gè)階段為新圖片文件的存儲(chǔ)；第三個(gè)階段為文件存儲(chǔ)路徑及文件名的更新。

（五）圖片上傳過(guò)程中和顯示時(shí)系統(tǒng)性能的提高。圖片的上傳和顯示時(shí)都耗用一定的網(wǎng)絡(luò)流量。系統(tǒng)性能的提高可以從兩方面來(lái)考慮：1.減少網(wǎng)絡(luò)流量來(lái)考慮；2.采用多線程技術(shù)。

圖片上傳時(shí)減少網(wǎng)絡(luò)流量可以考慮先壓縮再上傳。顯示時(shí)減少網(wǎng)絡(luò)流量可以在數(shù)據(jù)庫(kù)中存儲(chǔ)每個(gè)圖片最新更新時(shí)間，圖片下載一次后可以保存在客戶端本地，顯示圖片時(shí)，通過(guò)對(duì)比客戶端的最新更新時(shí)間與服務(wù)器的最新更新時(shí)間，如果相同，則加載客戶端本地，如果不同，則從服務(wù)器下載更新本地客戶端。手機(jī)APP中顯示圖片，可以考慮將圖片打包到APP當(dāng)中，這樣圖片的顯示基本為零流量。

電子商務(wù)網(wǎng)站上對(duì)于圖片的處理要求會(huì)隨著電子商務(wù)網(wǎng)站的業(yè)務(wù)量的增加會(huì)不斷地提高。所以除了以上幾個(gè)方面，需要考慮的問(wèn)題還有很多。以下幾點(diǎn)電子商務(wù)網(wǎng)站的開(kāi)發(fā)人員或設(shè)計(jì)人員也會(huì)經(jīng)常涉及到：

1.在實(shí)現(xiàn)上傳文件的功能時(shí)，需要限制上傳文件的大小，否則，如果有惡意用戶上傳的文件非常大，會(huì)給服務(wù)器造成相當(dāng)大的壓力，服務(wù)器可能由于讀寫大量數(shù)據(jù)導(dǎo)致系統(tǒng)崩潰[1]。

2.圖片上傳限制圖片尺寸。圖片尺寸包括圖片的寬和高兩個(gè)參數(shù)。如果對(duì)于上傳的圖片的尺寸不加以限制，在圖片實(shí)際顯示時(shí)會(huì)出現(xiàn)一系列意想不到的問(wèn)題。例如圖片變形，圖片顯示不清晰。上傳圖片的尺寸與實(shí)際顯示的尺寸應(yīng)盡量相同，或等比例稍微做一點(diǎn)縮放。

3.圖片上傳時(shí)限制圖片上傳的數(shù)量；上傳一些輪播的圖片，需要限定上傳圖片的總數(shù)量，當(dāng)上傳圖片的總數(shù)量超過(guò)時(shí)將限制上傳。

4.圖片上傳時(shí)限制文件的格式。不同格式圖片的壓縮比和清晰度是不同的。要保證圖片的清晰度并相對(duì)存儲(chǔ)容量較小，應(yīng)使用有一定壓縮比而且比較清晰的圖片格式存儲(chǔ)。

5.圖片進(jìn)行部分選取、復(fù)制、裁剪。圖片的上傳功能可能是有一些圖片處理能力的專業(yè)用戶，也可能是一些沒(méi)有太多圖片處理能力的一般用戶。對(duì)于后者，需要在圖片上傳的過(guò)程中進(jìn)行簡(jiǎn)單的圖片編輯功能。例如對(duì)圖片進(jìn)行部分選取、復(fù)制、裁剪。

6.圖片顯示時(shí)加水印。加水印處理有兩個(gè)目的。一個(gè)目的用來(lái)作水印推廣，另外一個(gè)目的為水印保護(hù)。水印推廣是在企業(yè)的宣傳材料上打上企業(yè)的水印標(biāo)志，從而達(dá)到推廣作用[2]。電子商務(wù)網(wǎng)站上的圖片在被瀏覽時(shí)會(huì)被自動(dòng)下載到客戶端，為了防止圖片被非授權(quán)情況下的使用，必要對(duì)圖片進(jìn)行一定的保護(hù)。通用的一種做法是給圖片加水印。當(dāng)圖片需要被保護(hù)時(shí)，圖片應(yīng)當(dāng)加水印處理。給圖片加水印可以使用繪圖軟件來(lái)處理，也可以使用編寫代碼來(lái)處理。

三、結(jié)語(yǔ)

電子商務(wù)網(wǎng)站的建設(shè)過(guò)程中，圖片的上傳和顯示在軟件設(shè)計(jì)中是一項(xiàng)基本功能。在編程過(guò)程中，顯示圖片在界面上看上去比較簡(jiǎn)單，但是會(huì)涉及到很多方面的細(xì)節(jié)問(wèn)題，圖片的上傳可以使用市場(chǎng)上成熟的控件。但如果考慮不充分，會(huì)帶來(lái)一系列的軟件問(wèn)題，這些問(wèn)題大多情況下不會(huì)影響到基本使用，但用戶體驗(yàn)會(huì)很差。例如上傳圖片后，由于更新圖片而將其他內(nèi)容更新；圖片更新和刪除不徹底導(dǎo)致服務(wù)器保存了很多廢舊的圖片；圖片的多次下載導(dǎo)致頁(yè)面顯示遲緩。本文對(duì)電子商務(wù)網(wǎng)站中圖片的上傳和顯示需要考慮的問(wèn)題進(jìn)行了綜合的分析，并給出了相應(yīng)的建議。

【參考文獻(xiàn)】

[1]軟件開(kāi)發(fā)技術(shù)聯(lián)盟.Java Web開(kāi)發(fā)實(shí)例大全[M].北京：清華大學(xué)出版社，2016.

[2]王浩.企業(yè)網(wǎng)絡(luò)營(yíng)銷實(shí)戰(zhàn)寶典及決勝攻略：策略、方法、技巧、實(shí)踐與案例[M].北京：時(shí)代出版?zhèn)髅焦煞萦邢薰荆本r(shí)代華文書(shū)局，2015.

作者簡(jiǎn)介：陳洪鈞（1974-），湖北隨州人，軟件設(shè)計(jì)師，研究方向：Java EE應(yīng)用開(kāi)發(fā)，Android 應(yīng)用開(kāi)發(fā)。