淘淘商城第27讲——实现图片上传功能

淩亂°似流年 2022-06-15 09:14 219阅读 0赞

# 分析一下图片上传相关的前端页面 #

上文我们使用FastDFS-Client测试了一下简单的文件上传操作，淘淘商城项目中新增商品时上传图片的功能还没实现，如下图所示。本文将花大量笔墨来教大家如何实现图片上传这个功能。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]  
我们来看下item-add.jsp页面，可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的，在`<a>`标签的下方是一个隐藏域，是用来接收图片上传到图片服务器的回显地址的，当我们提交表单的时候，可以把这些图片地址保存到数据库中去。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]  
图片上传的流程是这样的，item-add.jsp页面加载完之后，会自动调用TAOTAO.init方法进行初始化，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]  
TAOTAO是在common.js文件中定义的，我们来看下common.js文件，可以看到`TAOTAO = TT`都是在这里定义的，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]  
下面我们来编码实现图片上传这个功能。

# 实现图片上传功能 #

## 导包 ##

上传图片需要依赖commons-io和commons-fileupload这两个开发包，因此我们需要在taotao-manger-web工程的Maven依赖中查看一下是否有这两个jar包，可以看到目前是有commons-io-1.3.2.jar这个jar包的（它是在taotao-common工程的Maven依赖中，而taotao-manager-web工程依赖了taotao-common工程，因此它也有了这个jar包)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]  
但目前没有commons-fileupload这个jar包的，因此我们需要在taotao-manager-web工程的pom文件中添加对commons-fileupload的依赖。添加的依赖如下，由于在taotao-parent工程当中统一定义了版本号，因此这里不用再指定版本号了。

<dependency>
    	<groupId>commons-fileupload</groupId>
    	<artifactId>commons-fileupload</artifactId>
    </dependency>

## 配置文件上传解析器 ##

我们需要在taotao-manager-web工程的springmvc.xml文件当中配置一下文件上传解析器，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]  
为方便大家复制，现把文件上传解析器的配置贴出：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	
    	<property name="defaultEncoding" value="UTF-8"></property>
    	
    	<property name="maxUploadSize" value="5242880"></property>
    </bean>

## 配置访问图片前缀 ##

我们在访问图片时是以http的方式来访问的，例如`http://192.168.81.132:8888/group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg`，从上文中我们知道图片服务器返回的图片路径是`group1/M00/00/00/wKicDVjxPn2AOBiGAAHk-VzqZ6w952.jpg`，也就是说没有前面那部分路径，即`http://192.168.81.132:8888/`，而我们又不能在代码中写死前缀，因为IP地址及端口号都有可能更改，因此最好是将它们放到配置文件当中。

于是，我们在src/main/resources/resource目录下新建一个resource.properties文件，在配置文件中输入`IMAGE_SERVER_URL=http://192.168.81.132:8888/`，这说明图片服务器中的Nginx配置的访问端口是8888，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]

## 加载外部配置文件 ##

我们在上面新建了resource.properties这个文件之后，在Spring容器中我们就需要加载该配置文件了，因此我们在springmvc.xml配置文件中加入如下配置：

<context:property-placeholder location="classpath:resource/resource.properties" />

如此一来，springmvc.xml配置文件的完整内容就应该是下面这样子的了。

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">
            
        
        <context:property-placeholder location="classpath:resource/resource.properties" />
    
    	<context:component-scan base-package="com.taotao.controller" />
    	<mvc:annotation-driven />
    	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    		<property name="prefix" value="/WEB-INF/jsp/" />
    		<property name="suffix" value=".jsp" />
    	</bean>	
    	
    	
    	
    	
    	<mvc:resources location="/WEB-INF/js/" mapping="/js/**"/>
    	<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
    	
    	
    	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    	    
    	    <property name="defaultEncoding" value="UTF-8"></property>
    	    
    	    <property name="maxUploadSize" value="5242880"></property>
    	</bean>
    	
    	
    	
    	<dubbo:application name="taotao-manager-web"/>
    	<dubbo:registry protocol="zookeeper" address="192.168.81.131:2181"/>	
    	<dubbo:reference interface="com.taotao.service.TestService" id="testService" />
    	<dubbo:reference interface="com.taotao.service.ItemService" id="itemService" />
    	<dubbo:reference interface="com.taotao.service.ItemCatService" id="itemCatService" />
    	
    </beans>

## 创建Controller ##

我们需要新建一个PictureController类来处理图片上传操作，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]  
上图中的`@Value("${IMAGE_SERVER_URL}")`注解是为了注入我们在resource.properties配置文件中配置的图片访问前缀。`@RequestMapping("/pic/upload")`注解指定了上传文件（图片）请求的url，与下图指定的url一样，以上picUpload方法中的形参（即uploadFile）与下图中的上传文件的参数名称是要一样的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 8]  
不知你有没有想过，picUpload方法应该返回什么样格式的结果呢？我们可以从[kindeditor官网][kindeditor]查看一下，如下图所示，可以看到返回值格式是json串。  
![这里写图片描述][format_png]  
那么此时我们便有三种实现方式了。第一种实现方式是直接返回Map格式的数据，json和Map数据都是key和value的形式，因此返回Map是没问题的。第二种实现方式是创建一个pojo类，该类应有三个属性，分别是error、url以及message，然后再将该类转换为json之后返回。第三种实现方式是将Map转变为json字符串返回。这里我们暂且使用第一种实现方式。

为了方便大家复制，我会把PictureController类的代码粘贴在下面。

package com.taotao.controller;
    
    import java.util.HashMap;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.multipart.MultipartFile;
    
    import com.taotao.utils.FastDFSClient;
    
    /** * 图片上传Controller * @author liayun * */
    
    @Controller
    public class PictureController { 
    	
    	@Value("${IMAGE_SERVER_URL}")
    	private String IMAGE_SERVER_URL;
    	
    
    	@RequestMapping("/pic/upload")
    	@ResponseBody
    	public /*String*/ Map picUpload(MultipartFile uploadFile) { 
    		try { 
    			// 接收上传的文件
    			// 取文件的扩展名
    			String originalFilename = uploadFile.getOriginalFilename();
    			String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
    			// 上传到图片服务器
    			FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");
    			String url = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
    			url = IMAGE_SERVER_URL + url;
    			// 响应上传图片的url
    			Map result = new HashMap();
    			result.put("error", 0);
    			result.put("url", url);
    			return result;
    		} catch (Exception e) { 
    			e.printStackTrace();
    			Map result = new HashMap();
    			result.put("error", 0);
    			result.put("message", "图片上传失败");
    			return result;
    		}
    	}
    	
    }

## 测试图片上传功能 ##

现在我们就来试试图片上传这个功能，如下图所示，发现点击`开始上传`按钮之后图片正常回显了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 9]  
接着我们点击`全部插入`按钮，可以看到在`上传图片`按钮的下方有我们刚才上传的四张图片，而且我们是可以点击任何一张图片在浏览器中浏览的，比如我们点击第四张图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 10]  
在浏览器中访问的效果如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 11]  
这样我们的图片上传功能便实现了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70]: /images/20220615/f3f45073161a4431b2a8faca96d80e5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 1]: /images/20220615/52ed2e7955fe4853b4a9e5d76fda0ce2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 2]: /images/20220615/120b1701ec354033bec65f4b80296283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 3]: /images/20220615/9129c5becb8e446b867055b96e069462.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 4]: /images/20220615/33c9754cac1b495e81ac90e83e842852.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 5]: /images/20220615/51616d62085043998adf61ef7a8dfc73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 6]: /images/20220615/6cf301f210fc4f0fb2935e9195afc58b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 7]: /images/20220615/97e8a35f8376421f948a0022b2442bb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 8]: /images/20220615/4d614e7e94764b88b8f0b159e24fed6f.png
[kindeditor]: http://kindeditor.NET/docs/upload.html
[format_png]: /images/20220615/a4ee87fda923437eb6ca45349bc710cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 9]: /images/20220615/dbd45161f27f4fba9c84acea645e8d1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 10]: /images/20220615/feb1326850d44cfaacda7a3bf71fed23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llcmVueXVhbl9wa3U_size_16_color_FFFFFF_t_70 11]: /images/20220615/255ac5fe5dc24daa9018a542d7021ac5.png