如何实现图片的上传-(上传到本地)

图片的上传以及Nginx的使用实现上传图片的回显

1.图片的上传:

图片上传使用的是easyUI的组件,并不是自己实现的.

实现图片上传的前提是配置了文件上传的解析器(applicationContext-mvc.xml):

<!-- 配置文件上传的解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"><property name="maxUploadSize" value="10485670"></property><property name="defaultEncoding" value="UTF-8"></property>  <!-- 解决文件是中文的问题 -->
</bean>

1.1 前端的代码:

kingEditorParams : {filePostName  : "uploadFile",uploadJson : '/pic/upload',dir : "image"
},

这是前端common.js实现的封装的代码,当一点击开始上传的时候,就是访问的这个路径,会把图片发送给服务端(下面这张图是使用了Nginx反向代理之后实现的图片回显的效果)

当一点击开始上传之后,会把图片通过post请求发送给服务端,处理请求的路径是/pic/upload,文件上传的名字是uploadFile

1.2 服务端的实现:

FileController:具体的业务放在service层

@Controller
public class FileController {@Autowiredprivate FileUploadService fileUploadService;@RequestMapping("/pic/upload")@ResponseBodypublic PicUploadResult uploadPic(MultipartFile uploadFile) {return fileUploadService.uploadPic(uploadFile);}
}

controller层接受请求的参数名字是uploadFile(这个是固定的,前端传过来的),参数的类型是MultipartFile,MultipartFile是一个接口,具体的类型是org.springframework.web.multipart.commons.CommonsMultipartFile,配置的文件上传解析器会将客户端传过来的文件解析成CommonsMultipartFile.

FileUploadService:

@Service

public class FileUploadServiceImpl implements FileUploadService {

/*** Spring容器如何动态的获取数据* @Value : 实现数据的动态获取* 说明:@value 注解可以直接为String或者基本类型赋值*     同时,可以利用spring的机制可以为array , list , mapp , set properties 赋值* * 注意事项:*  1.在SSM框架中,该注解需要依赖@Service注解(Spring容器内部才能使用)  在Controller注解可能不好使*      SpringMVC容器  跟 Spring容器  是两个不同的容器*  2.如果使用SpringBoot则任何地方都能用*/
@Value("${image.localDir}")
private String localDir;
@Value("${image.urlPre}")
private String urlPre;@Override
public PicUploadResult uploadPic(MultipartFile uploadFile) { // 图片上传PicUploadResult result = new PicUploadResult();// 1.判断是否为图片 abc.jpgString fileName = uploadFile.getOriginalFilename();// 使用正则表达式进行判断if (!fileName.matches("^.*(jpg|png|gif)$")) { // . 代表任意的字符 * 代表有任意多个 的// 表示不是图片result.setError(1);return result;}try {/*** ImageIO是javax下面的一个工具类*/// 2.判断是否为恶意程序 uploadFile.getInputStream() 文件流BufferedImage bufferedImage = ImageIO.read(uploadFile.getInputStream());// 3.获取图片宽度和高度 (图片宽高为 0 ,则图片是假的图片)int height = bufferedImage.getHeight();int width = bufferedImage.getWidth();if (height == 0 || width == 0) {result.setError(1); // 假图片return result;}// 4.准备文件存储的路径()// String localDir = "d:/file/"; // 本地文件夹// 5.实现分文件存储 yyyy/MM/dd 以 天 为单位 分文件String dateDir = new SimpleDateFormat("yyyy/MM/dd").format(new Date());// 6.形成保存图片的文件夹 d:/file/yyyy/MM/dd (文件存储的根目录)String picDir = localDir + dateDir;// 7.生成文件夹File picFile = new File(picDir); // 文件夹的文件执行if (!picFile.exists()) { // 文件夹不存在 就创建文件夹picFile.mkdirs();}// 8.重命名上传的文件名字 (避免重名)String uuid = UUID.randomUUID().toString().replace("-", ""); // asa22exac-adsfafadsf-3fddsfds// 生成随机数int randomNum = new Random().nextInt(999); // 生成随机数 (0-999)// 获取文件的后缀名String fileType = fileName.substring(fileName.lastIndexOf(".")); // .jpg// 拼文件名String realFileName = uuid + randomNum + fileType; // 真实的文件名称// 9生成文件的本地磁盘的路径 d:/file/yyyy/MM/dd/wqrwadasfiuoew800.jpgString localPath = picDir + "/" + realFileName;// 10实现文件的上传uploadFile.transferTo(new File(localPath));// 11添加文件的宽度,高度 需要返回result.setHeight(height + "");result.setWidth(width + "");// 12准备文件的虚拟路径// http://image.jt.com/file/2018/05/07/radweedwsaf210.jpg// String urlPre = "http://image.jt.com/";String urlPath = urlPre + dateDir + "/" + realFileName;result.setUrl(urlPath);} catch (IOException e) { // 不是图片会抛异常e.printStackTrace();result.setError(1); // 表示为恶意程序return result;}return result;}
}

分析:客户端上传文件,需要先判断上传的文件是不是图片,先使用正则表达式进行第一层过滤,如果正则的验证过了之后,但是可能是伪图片,所以还得使用ImageIO来将上传的文件进行转换成BufferedImage,如果转换失败,那么可能不是图片,转换成功之后,还得获取图片的宽,高,如果宽高任何一个为0,就说明转换之后不是图片,也就说明上传的不是图片.

如果这些验证都过了,说明上传的文件是图片,那么我们就需要将图片保存起来.由于上传的图片名字是固定的,而且保存的时候如果使用原始的图片名字的话,很可能
会出现名字冲突的问题,为了尽可能地避免重现保存图片出现冲突的问题,就需要服务端生产随机的名字,这里采用一种更安全的做法,先使用UUID生成一串随机数,
但是这种方式生成的随机数是根据时间戳来生成的(同一毫秒值生成的uuid随机数可能会一样),所以还得使用Randoom再生成随机的数字,将uuid生成的随机串
(去掉'-')加上生成的随机数字组成图片的名字,这种情况出现重名的概率比较小

注意拿到了图片文件之后,还需要将图片文件保存,所有的图片都保存在一个大的文件夹下(d:/file),但是这个文件夹路径是不能写死的,得用配置文件进行配置,还有
一点就是图片的回显需要一个虚拟的路径.图片上传之后,

图片的上传之后的回显是由easyUI来实现的,但是要求是从服务端返回个数据的页面的json数据是有要求的,

{"error":0,"url":"图片的保存路径","width":图片的宽度,"height":图片的高度}

参数说明： 0代表是一张图片，如果是0，前台才可以解析并显示。1代表不是图片，
不显示如果不设置宽度和高度，则默认用图片原来的大小，所以不用设置

返回的就是 PicUploadResult

public class PicUploadResult {private Integer error=0;        //图片上传错误不能抛出，抛出就无法进行jsp页面回调，所以设置这个标识，0表示无异常，1代表异常private String url;private String width;private String height;
~~~ 此处省略get,set方法

这个返回的对象里面的url需要在服务端进行封装,封装的就是easyUI实现回显图片的虚拟路径,这个url是虚拟路径:

理解这个url(虚拟路径) : 图片有专门的图片服务器,图片的存储也是在专门的服务器里面,异常easyUI要进行图片的回显,就需要访问图片服务器.目前我们这个
项目保存图片是保存在d:file里面,目前的水平只能做到保存在本机(还做不到保存在别的服务器),但是做图片回显的时候,我们就希望模拟实现那种跨服务器的
图片访问(现在用的是同一台主机),所以返回的url是一个虚拟路径,http://image.jt.com/.这就相当于当图片回显时,访问的是这个域名下的图片.

为了实现程序的可扩展性,可以把两个变量写在配置文件里面,一个是localDir(图片保存的本地根目录),还有一个是urlPre(图片回显时需要访问的网址)

有了这个properties配置文件之后,好需要加载这个配置文件(在applicationContext里面进行加载)

    <bean id="placeholderConfigurer" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"><!-- 设定参数  Resource[] locations  数组类型 --><property name="locations"><!-- 可以加多个 --><list><value>classpath:/properties/jdbc.properties</value><value>classpath:/properties/image.properties</value></list>  <!-- 或者array --></property></bean>

这样在service层就可以直接使用@Value()注解进行动态地赋值注入了