项目中使用ajax与FastDFS实现图片上传回显

项目中使用ajax与FastDFS实现图片上传回显

前言
大家好，今天呢，我来给大家说说项目中关于分布式图片上传的实现，做好笔记，我们开始。如果博客中出现技术性的错误，欢迎大家给我留言也可以私聊我改正，我定当虚心学习，谢谢大家。

正文
fastDFS 是以C语言开发的一项开源轻量级分布式文件系统，他对文件进行管理，主要功能有：文件存储，文件同步，文件访问（文件上传/下载）,特别适合以文件为载体的在线服务，比如图片网站，视频网站等

① FastDFS原理，首先用户请求到管理员接收，管理员到查询图片存储的区域，也可以理解为存储在哪台机器上 ，同时一个标准的结构为6台服务器，分为tracker管理员-tracker管理员备份机，服务器1-服务器1备份机，服务器2-服务器2备份机，这样的好处就是如果一台服务器或管理员宕机，备份机可以顶上去，依旧不影响使用。

由于安装比较繁琐，我这边就不给大家介绍安装教程了，如有需要的小伙伴可以私聊我或者百度安装教程即可。

② FastDFS相关配置，首先我们要配置相关文件，比如
tracker_server为管理员配置地址，base_path为文件存储的位置，network_timeout为超时时间，connect_timeout为连接的超时时间，大家根据自己的需求自行更改。
③ FastDFSUtil工具类，因为是Util工具类形势，我们可以直接用，接下来我给大家详细介绍一下工具类的编写。
1.首先通过ClassPathResource 获取配置文件。
2.ClientGlobal.init 为全局的初始化器
3.TrackerClient 然后通过客户端获取到服务器
4.TrackerServer 返回给我们对应服务端的地址信息
5.StorageServer存储的服务器
6.StorageClient1客户端获取到存储服务器
7.FilenameUtils.getExtension(name);获取到图片后缀（png,jpg,…）
8.NameValuePair[] meta_list 为键值对,把信息记录到这里
9.storageClient1.upload_file1(pic, ext, meta_list) 最后将信息上传上去。

④ 配置文件上传解析器，在springmvc配置文件下配置文件上传解析器，可以规定图片上传最大值为property name=“maxUploadSize”，value为规定图片大小
⑤ 在前台页面编写，添加浏览按钮事件，为jquery异步上传做准备

⑥ 上传图片的方法（jquery）异步上传，借助于jquery框架 jquery.form.js 原理：js模拟出一个Form表单（提交图片到服务器）
详细说明：
1.url：要提交到的目标位置
2.type：提交的何种方式
3.dataType：返回的何种数据类型
4.success：回调函数，将图片回显给网页

⑦ 后台提交接口，实现类编写。

dao

接口

实现类
⑧ 别忘记我们要将它变成服务，就需在dubbo中进行注册。（详细可看第二篇博客关于dubbo的使用）


⑨ 后台Controller编写，接收上传的图片，获取path地址并传给前台页面回显。



注意：
1.MultipartFile对象要跟页面里的按钮事件name值相对应，或使用注解绑定@RequestParam(value = “pic”)即可对MultipartFile对象自己命名
2.返回的path地址只是图片的地址格式为：group1/M00/00/01/wKjIgFWOYc6APpjAAAD-qk29i78248.jpg
我们需要加上ip地址，我们将它设置为常量（Constart.java），拼接后的地址就变成：http://192.168.200.128/group1/M00/00/01/wKjIgFWOYc6APpjAAAD-qk29i78248.jpg

⑩ 所有步骤完成后，图片上传回显成功。

总结
从FastDFS的整个设计看，基本上都已简单为原则。比如以机器为单位备份数据，简化了tracker的管理工作；storage直接借助本地文件系统原样存储文件，简化了storage的管理工作；文件写单份到storage即为成功、然后后台同步，简化了写文件流程。但是它也有一些缺点比如 不支持断点续传，对大文件将是噩梦(FastDFS不适合大文件存储)，不支持POSIX通用接口访问等等。

结尾
最后文章中介绍FastDFS图片上传如果您发现有错误的地方，欢迎大家指出，共同学习，共同进步，谢谢大家。

本文地址：https://blog.csdn.net/weixin_43768509/article/details/107150691