試析圖片上傳及顯示在電子商務中的應用

摘要：電子商務中圖片得到廣泛地應用，圖片的上傳和顯示涉及到很多細節上的技術問題。文章嘗試從多個方面去分析該類問題并給出一些解決方案。

關鍵詞：圖片上傳；電子商務

一、背景

電子商務是近一二十年來發展最為迅猛的一個產業。電子商務網站的建設是電子商務所涉及到的一個重要的組成部分。在電子商務網站的建設過程中，我們經常需要上傳一些圖片，并將上傳的圖片顯示在各種不同的電子媒體（如手機、平板、電腦）上。圖片在上傳和顯示的過程中，作為軟件開發人員可能會考慮到以下幾個問題：

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

（二）圖片上傳到服務器如何存儲。

（三）圖片上傳后如何實現頁面的局部更新。

（四）圖片上傳后如何實現更新和刪除。

（五）圖片上傳過程中和顯示時如何提高系統的性能。

二、圖片的上傳及顯示

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

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

使用流的方式則編寫的代碼相對較多，但更靈活。可以選擇本地圖片文件讀取，使用輸入流將其讀入到內存，接著使用輸出流傳給服務器的后臺服務。后臺服務獲得網絡輸入流讀入到內存后，使用輸出流以合適的方式存儲下來。

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

圖片文件可以存儲到數據庫，也可以單獨以文件存儲。存儲在數據庫中，文件太大，一條記錄一般只能存儲一個圖片，傳輸多張圖片一般需要多條記錄。以單獨的文件存儲時，文件存儲的位置、文件名及文件存儲的類型還是需要保存到數據庫中。為了減少圖片文件的存儲空間，可以采用適當的壓縮技術，需要說明的是，圖片壓縮一般壓縮效果不太明顯。

（三）圖片上傳后實現頁面的局部更新。圖片上傳后需要顯示在媒體的界面上，如果更新整個界面會帶來兩個問題。一個問題是界面的其他數據也可能會被破壞，另一個是整個界面的更新需要傳輸更多的數據。所以圖片上傳后應該實現頁面的局部更新。解決頁面的局部更新有很多種方法，一種方法是將圖片放在框架中，更新頁面時，只更新該框架。另一種方法則是使用AJAX技術實現頁面的局部更新。相對于前一種方法，后一種方法代碼更簡單，效率更高。

（四）圖片上傳后實現更新和刪除。圖片上傳后的更新和刪除同數據庫記錄的更新和刪除有相似之處，但又完全不同。刪除圖片不僅要包括刪除記錄中圖片的文件存儲的路徑和文件名，還要刪除實際的圖片文件。圖片的更新包括三個階段：第一個階段為舊圖片文件的刪除，第二個階段為新圖片文件的存儲；第三個階段為文件存儲路徑及文件名的更新。

（五）圖片上傳過程中和顯示時系統性能的提高。圖片的上傳和顯示時都耗用一定的網絡流量。系統性能的提高可以從兩方面來考慮：1.減少網絡流量來考慮；2.采用多線程技術。

圖片上傳時減少網絡流量可以考慮先壓縮再上傳。顯示時減少網絡流量可以在數據庫中存儲每個圖片最新更新時間，圖片下載一次后可以保存在客戶端本地，顯示圖片時，通過對比客戶端的最新更新時間與服務器的最新更新時間，如果相同，則加載客戶端本地，如果不同，則從服務器下載更新本地客戶端。手機APP中顯示圖片，可以考慮將圖片打包到APP當中，這樣圖片的顯示基本為零流量。

電子商務網站上對于圖片的處理要求會隨著電子商務網站的業務量的增加會不斷地提高。所以除了以上幾個方面，需要考慮的問題還有很多。以下幾點電子商務網站的開發人員或設計人員也會經常涉及到：

1.在實現上傳文件的功能時，需要限制上傳文件的大小，否則，如果有惡意用戶上傳的文件非常大，會給服務器造成相當大的壓力，服務器可能由于讀寫大量數據導致系統崩潰[1]。

2.圖片上傳限制圖片尺寸。圖片尺寸包括圖片的寬和高兩個參數。如果對于上傳的圖片的尺寸不加以限制，在圖片實際顯示時會出現一系列意想不到的問題。例如圖片變形，圖片顯示不清晰。上傳圖片的尺寸與實際顯示的尺寸應盡量相同，或等比例稍微做一點縮放。

3.圖片上傳時限制圖片上傳的數量；上傳一些輪播的圖片，需要限定上傳圖片的總數量，當上傳圖片的總數量超過時將限制上傳。

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

5.圖片進行部分選取、復制、裁剪。圖片的上傳功能可能是有一些圖片處理能力的專業用戶，也可能是一些沒有太多圖片處理能力的一般用戶。對于后者，需要在圖片上傳的過程中進行簡單的圖片編輯功能。例如對圖片進行部分選取、復制、裁剪。

6.圖片顯示時加水印。加水印處理有兩個目的。一個目的用來作水印推廣，另外一個目的為水印保護。水印推廣是在企業的宣傳材料上打上企業的水印標志，從而達到推廣作用[2]。電子商務網站上的圖片在被瀏覽時會被自動下載到客戶端，為了防止圖片被非授權情況下的使用，必要對圖片進行一定的保護。通用的一種做法是給圖片加水印。當圖片需要被保護時，圖片應當加水印處理。給圖片加水印可以使用繪圖軟件來處理，也可以使用編寫代碼來處理。

三、結語

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

【參考文獻】

[1]軟件開發技術聯盟.Java Web開發實例大全[M].北京：清華大學出版社，2016.

[2]王浩.企業網絡營銷實戰寶典及決勝攻略：策略、方法、技巧、實踐與案例[M].北京：時代出版傳媒股份有限公司，北京時代華文書局，2015.

作者簡介：陳洪鈞（1974-），湖北隨州人，軟件設計師，研究方向：Java EE應用開發，Android 應用開發。