JAVA中富文本编辑器的使用和FastDFS图片上传

目录

1.富文本编辑器

1.1富文本编辑器的初始化

1.2富文本编辑器内容提取和清除

2.FastDFS图片服务器

2.1FastDFS图片服务器的基本结构

2.2图片服务器测试案列

2.3图片服务器在项目中的具体使用

---

 在品优购项目第五天商品上传中，用到了富文本编辑器(项目中采用的是kindeditor)和FastDFS图片上传服务器

1.富文本编辑器

1.1富文本编辑器的初始化

<script type="text/javascript">
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});
</script>

1.2富文本编辑器内容提取和清除

//提取
$scope.entity.goodsDesc.introduction=editor.html();

//清空
editor.html("");

2.FastDFS图片服务器

2.1FastDFS图片服务器的基本结构

       FastDFS 架构包括 Tracker server 和 Storage server。客户端请求 Tracker server 进行文件上传、下载，通过 Tracker server 调度最终由 Storage server 完成文件上传和下载。

       Tracker server 作用是负载均衡和调度，通过 Tracker server 在文件上传时可以根据一些策略找到 Storage server 提供文件上传服务。可以将 tracker 称为追踪服务器或调度服务器。

        Storage server 作用是文件存储，客户端上传的文件最终存储在 Storage 服务器上，Storageserver 没有实现自己的文件系统而是利用操作系统 的文件系统来管理文件。可以将storage称为存储服务器。

服务端两个角色：

       Tracker：管理集群，tracker 也可以实现集群。每个 tracker 节点地位平等。收集 Storage 集群的状态。

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

2.2图片服务器测试案列

项目中将下面的步骤封装成一个工具类

package cn.itcast.demo;

import java.io.FileNotFoundException;
import java.io.IOException;

import org.csource.fastdfs.ClientGlobal;
import org.csource.fastdfs.StorageClient;
import org.csource.fastdfs.StorageServer;
import org.csource.fastdfs.TrackerClient;
import org.csource.fastdfs.TrackerServer;

public class Test {

	public static void main(String[] args) throws FileNotFoundException, IOException, Exception {
		// 1.加载配置文件
		ClientGlobal.init("D:\\pinyougou_bigdata1\\fastDFSdemo\\src\\main\\resources\\fdfs_client.conf");
		// 2.构建一个管理者客户端
		TrackerClient client=new TrackerClient();
		// 3.连接管理者服务端
		TrackerServer trackerServer = client.getConnection();
		//4. 声明存储服务端
		StorageServer storageServer=null;
		//5. 获取存储服务器的客户端对象
		StorageClient storageClient=new StorageClient(trackerServer, storageServer);
		//6.上传文件
		String[] strings = storageClient.upload_file("e:\\image\\b.jpg", "jpg", null);
		//7.显示上传结果 file_id
		for(String str:strings){
			System.out.println(str);
		}		
		
	}

}

2.3图片服务器在项目中的具体使用

1. 拷贝FastDFS的配置文件fdfs_client.conf到项目中，改配置文件主要修改的部分是tracker的IP地址，并且新建配置文件.properties，加入服务器的ip，用户拼接图片的具体访问路径

   tracker_server=192.168.25.133:22122
   
   FILE_SERVER_URL=http\://192.168.25.133/

    

2. 配置web工程的spingmvc.xml配置文件

   <!-- 配置多媒体解析器 -->
   <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   		<property name="defaultEncoding" value="UTF-8"></property>
   		<!-- 设定文件上传的最大值5MB，5*1024*1024 -->
   		<property name="maxUploadSize" value="5242880"></property>
   </bean>
   

    

3. 编码进行文件上传

   @RestController
   public class UploadController {
   	@Value("${FILE_SERVER_URL}")
   	private String FILE_SERVER_URL;
   
   	@RequestMapping("/upload")
   	public Result upload(MultipartFile file) {
   		String originalFilename = file.getOriginalFilename();//文件原始名称
   		String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);//取文件后缀名
   		try {
   			FastDFSClient fastDFSClient = new FastDFSClient("classpath:/config/fdfs_client.conf");
   			String uploadFile = fastDFSClient.uploadFile(file.getBytes(), extName);
   			// 拼接返回的 url 和 ip 地址，拼装成完整的 url
   			String url = FILE_SERVER_URL + uploadFile;
   			return new Result(true, url);
   		} catch (Exception e) {
   			e.printStackTrace();
   			return new Result(false, "上传失败");
   		}
   	}
   
   }