【涛涛商城】 图片上传

1、使用技术

1.1 传统上传

参考springMVC哪一个帖子 https://blog.csdn.net/lxiansheng001/article/details/81089919

1.2  互联网上传

1.3 fastDFS 

1.3.1 什么是fastDFS

FastDFS是用c语言编写的一款开源的分布式文件系统。FastDFS为互联网量身定制，充分考虑了冗余备份、负载均衡、线性扩容等机制，并注重高可用、高性能等指标，使用FastDFS很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。

1.3.2 fastDFS架构（没有主从之分）

1. FastDFS架构包括 Tracker server和Storage server。客户端请求Tracker server进行文件上传、下载，通过Tracker server调度最终由Storage server完成文件上传和下载。
2. Tracker server作用是负载均衡和调度，通过Tracker server在文件上传时可以根据一些策略找到Storage server提供文件上传服务。可以将tracker称为追踪服务器或调度服务器。
3. Storage server作用是文件存储，客户端上传的文件最终存储在Storage服务器上，Storage server没有实现自己的文件系统而是利用操作系统 的文件系统来管理文件。可以将storage称为存储服务器。

服务端两个角色：

Tracker：管理集群，tracker也可以实现集群。每个tracker节点地位平等。和 dubbo的注册中心有类似的功能

收集Storage集群的状态。

Storage：实际保存文件

Storage分为多个组，每个组之间保存的文件是不同的。每个组内部可以有多个成员，组成员内部保存的内容是一样的，组成员的地位是一致的，没有主从的概念。

扫描二维码关注公众号，回复： 2730782 查看本文章

2、文件上传

2.1 文件上传流程

客户端上传文件后存储服务器将文件ID返回给客户端，此文件ID用于以后访问该文件的索引信息。文件索引信息包括：组名，虚拟磁盘路径，数据两级目录，文件名。

1. 组名：文件上传后所在的storage组名称，在文件上传成功后有storage服务器返回，需要客户端自行保存。
2. 虚拟磁盘路径：storage配置的虚拟路径，与磁盘选项store_path*对应。如果配置了store_path0则是M00，如果配置了store_path1则是M01，以此类推。
3. 数据两级目录：storage服务器在每个虚拟磁盘路径下创建的两级目录，用于存储数据文件。
4. 文件名：与文件上传时不同。是由存储服务器根据特定信息生成，文件名包含：源存储服务器IP地址、文件创建时间戳、文件大小、随机数和文件拓展名等信息。

2.2 文件下载

3、图片上传测试

3.1 使用java客户端

将上述install安装后，将jar依赖添加至 taotao.manager.web工程的pom.xml文件中

3.2 上传图片测试

3.2.1 上传步骤

1. 加载配置文件，配置文件中的内容就是tracker服务的地址。配置文件内容：tracker_server=192.168.25.175:22122
2. 创建一个TrackerClient对象。直接new一个。
3. 使用TrackerClient对象创建连接，获得一个TrackerServer对象。
4. 创建一个StorageServer的引用，值为null
5. 创建一个StorageClient对象，需要两个参数TrackerServer对象、StorageServer的引用
6. 使用StorageClient对象上传图片。
7. 返回数组。包含组名和图片的路径。

3.2.2  manager-web工程中测试代码

@Test
	public void testFileUpload() throws Exception {
		// 1、加载配置文件，配置文件中的内容就是tracker服务的地址。
		ClientGlobal.init("I:/EclipseWorkSpace/taotao-manager-web/src/main/resources/resource/client.conf");
		// 2、创建一个TrackerClient对象。直接new一个。
		TrackerClient trackerClient = new TrackerClient();
		// 3、使用TrackerClient对象创建连接，获得一个TrackerServer对象。
		TrackerServer trackerServer = trackerClient.getConnection();
		// 4、创建一个StorageServer的引用，值为null
		StorageServer storageServer = null;
		// 5、创建一个StorageClient对象，需要两个参数TrackerServer对象、StorageServer的引用
		StorageClient storageClient = new StorageClient(trackerServer, storageServer);
		// 6、使用StorageClient对象上传图片。
		//扩展名不带“.”
		String[] strings = storageClient.upload_file("C:/Users/Administrator/Documents/Tencent Files/834291481/Image/C2C/11.jpg", "jpg", null);
		// 7、返回数组。包含组名和图片的路径。
		for (String string : strings) {
			System.out.println(string);
		}
	}

4、上传图片

4.1 前端分析

4.1.1 上传图片按钮

4.1.2 事件绑定

 

使用的富文本编辑器的一部分功能。

封装的参数  

4.1.3  页面请求

请求的url：/pic/upload

参数：MultiPartFile uploadFile

返回值：json数据格式

根据返回值可以有三种解决方式：

创建一个pojo对象

可以使用map对象

可以使用将对象转换成String的json格式（推荐，防止服务器不兼容）

4.2 业务逻辑

前提条件：

1. 需要把commons-io、fileupload 的jar包添加到工程中。
2. 配置多媒体解析器。

业务逻辑：

1. 接收页面传递的图片信息uploadFile
2. 把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。
3. 图片服务器返回图片的url
4. 将图片的url补充完整，返回一个完整的url。
5. 把返回结果封装到一个Map对象中返回。

4,3 代码实现

4.3.1 conf文件

使用

4.3.2Controller

@Controller
public class PictureController {
	
	@Value("${IMAGE_SERVER_URL}")
	private String IMAGE_SERVER_URL;

	@RequestMapping("/pic/upload")
	@ResponseBody
	public String fileUpload(MultipartFile uploadFile) {
		try {
			//1、取文件的扩展名
			String originalFilename = uploadFile.getOriginalFilename();
			String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
			//2、创建一个FastDFS的客户端
			FastDFSClient fastDFSClient = new FastDFSClient("classpath:resource/client.conf");
			//3、执行上传处理
			String path = fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
			//4、拼接返回的url和ip地址，拼装成完整的url
			String url = IMAGE_SERVER_URL + path;
			//5、返回map
			Map result = new HashMap<>();
			result.put("error", 0);
			result.put("url", url);
			
			return JsonUtils.objectToJson(result);
		} catch (Exception e) {
			e.printStackTrace();
			//5、返回map
			Map result = new HashMap<>();
			result.put("error", 1);
			result.put("message", "图片上传失败");
			return JsonUtils.objectToJson(result);
		}
	}
}