试析图片上传及显示在电子商务中的应用

摘要：电子商务中图片得到广泛地应用，图片的上传和显示涉及到很多细节上的技术问题。文章尝试从多个方面去分析该类问题并给出一些解决方案。

关键词：图片上传；电子商务

一、背景

电子商务是近一二十年来发展最为迅猛的一个产业。电子商务网站的建设是电子商务所涉及到的一个重要的组成部分。在电子商务网站的建设过程中，我们经常需要上传一些图片，并将上传的图片显示在各种不同的电子媒体（如手机、平板、电脑）上。图片在上传和显示的过程中，作为软件开发人员可能会考虑到以下几个问题：

（一）图片如何从客户端上传到服务器。

（二）图片上传到服务器如何存储。

（三）图片上传后如何实现页面的局部更新。

（四）图片上传后如何实现更新和删除。

（五）图片上传过程中和显示时如何提高系统的性能。

二、图片的上传及显示

（一）图片从客户端上传到服务器。图片从客户端上传到服务器一种方式是使用成熟的组件，另一种方式是使用流。

使用成熟的组件一般情况下通过选择本地图片文件，然后选择后台服务上传或直接上传。这种方式编写的代码很少，但是使用这种方式文件的存储方式、显示方式都有可能受到很大的限制。

使用流的方式则编写的代码相对较多，但更灵活。可以选择本地图片文件读取，使用输入流将其读入到内存，接着使用输出流传给服务器的后台服务。后台服务获得网络输入流读入到内存后，使用输出流以合适的方式存储下来。

（二）图片文件存储到服务器。图片文件存储有两个方面的问题需要考虑：一是存储到哪儿？二是是否使用压缩？

图片文件可以存储到数据库，也可以单独以文件存储。存储在数据库中，文件太大，一条记录一般只能存储一个图片，传输多张图片一般需要多条记录。以单独的文件存储时，文件存储的位置、文件名及文件存储的类型还是需要保存到数据库中。为了减少图片文件的存储空间，可以采用适当的压缩技术，需要说明的是，图片压缩一般压缩效果不太明显。

（三）图片上传后实现页面的局部更新。图片上传后需要显示在媒体的界面上，如果更新整个界面会带来两个问题。一个问题是界面的其他数据也可能会被破坏，另一个是整个界面的更新需要传输更多的数据。所以图片上传后应该实现页面的局部更新。解决页面的局部更新有很多种方法，一种方法是将图片放在框架中，更新页面时，只更新该框架。另一种方法则是使用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 应用开发。