今天來開始寫圖片上傳的功能, 現在的圖片上傳都講求 上傳完成后立刻回顯且頁面不刷新, 這里到底是怎么做的呢? 當然是借助于ajax了, 但是ajax又不能提交表單, 這里我們還要借助一個插件: jquery.form.js
剩下的一個是FastDFS, 那么什么是FastDFS呢?
FastDFS是一個開源的輕量級分布式文件系統,由跟蹤服務器(tracker server)、存儲服務器(storage server)和客戶端(client)三個部分組成,主要解決了海量數據存儲問題,特別適合以中小文件(建議范圍:4KB < file_size <500MB)為載體的在線服務。
這里只來說FastDFS的優點:
解決了大容量存儲和負載均衡的問題。特別適合以文件為載體的在線服務,如相冊網站、視頻網站等等。
FastDFS服務端有兩個角色:跟蹤器(tracker)和存儲節點(storage)。跟蹤器主要做調度工作,在訪問上起負載均衡的作用。
更多詳細內容可以參考:http://blog.chinaunix.net/uid-20196318-id-4058561.html
一, 開發實例
0, 使用FastDFS:
首先需要在Linux下安裝且配置FastDFS, 這里不再贅述.
首先來看下引入的FastDFS jar包:
查看fdfs_client.conf配置文件:
我們發現這里面的設置不是我們想要的, 那么該怎么辦呢? 我們需要在自己工程中覆蓋一份:
配置文件內容如下:(這里需要配置tracker_server)
# connect timeout in seconds # default value is 30s connect_timeout=30 # network timeout in seconds # default value is 30s network_timeout=60 # the base path to store log files base_path=/home/fastdfs # tracker_server can ocur more than once, and tracker_server format is # "host:port", host can be hostname or ip address tracker_server=192.168.200.128:22122 #tracker_server=192.168.101.4:22122 #standard log level as syslog, case insensitive, value list: ### emerg for emergency ### alert ### crit for critical ### error ### warn for warning ### notice ### info ### debug log_level=info # if use connection pool # default value is false # since V4.05 use_connection_pool = false # connections whose the idle time exceeds this time will be closed # unit: second # default value is 3600 # since V4.05 connection_pool_max_idle_time = 3600 # if load FastDFS parameters from tracker server # since V4.05 # default value is false load_fdfs_parameters_from_tracker=false # if use storage ID instead of IP address # same as tracker.conf # valid only when load_fdfs_parameters_from_tracker is false # default value is false # since V4.05 use_storage_id = false # specify storage ids filename, can use relative or absolute path # same as tracker.conf # valid only when load_fdfs_parameters_from_tracker is false # since V4.05 storage_ids_filename = storage_ids.conf #HTTP settings http.tracker_server_port=80 #use "#include" directive to include HTTP other settiongs ##include http.conf
1, 在jsp中添加input標簽上傳圖片
這里有一個隱藏域字段是imgUrl, 這里是保存上傳圖片成功后返回的圖片地址, 在submit整個表單時, 將這個url地址保存到數據庫, 在list.jsp中直接取這個url就可以回顯圖片數據了.
2, 添加上傳js 代碼:
這里使用到了ajaxSubmit方法, 當我們上傳圖片時實際上是將表單提交了, 然后通過UploadPicController中的uploadPic方法去處理發送的請求.
3, 構建uploadPicController.cs去解析uploadPic.do請求
Controller層:
UploadController.java:
* 上傳圖片 */ @Controller @RequestMapping(value="/upload") public class UploadController { @Autowired private UploadService uploadService; //上傳圖片品牌 @RequestMapping(value="/uploadPic.do") public void uploadPic(@RequestParam(required=false) MultipartFile pic, HttpServletResponse response) throws Exception{ //Java接口連接FastDFS String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize()); //path:group1/M00/00/01/wKjIgFWOYc6APpjAAAD-qk29i78248.jpg //url:http://192.168.200.128 (Linux 虛擬機的ip地址) String url = Constants.img_url + path; //Json工具類 JSONObject jo = new JSONObject(); jo.put("url", url); jo.put("path", path); //返回json response.setContentType("application/json;charset=UTF-8"); response.getWriter().write(jo.toString()); } }
通過json的格式將url寫回到前端, 這樣在ajax請求中就可以接收到參數并回顯圖片.
Service層:
UploadServiceImpl.java:
/* * 上傳圖片 */ @Service("uploadService") public class UploadServiceImpl implements UploadService { //上傳 public String uploadPic(byte[] pic, String name, long size){ return FastDFSUtils.uploadPic(pic, name, size); } }
Common工具類:
FastDFSUtils.cs
/* *上傳FastDFS圖片 */ public class FastDFSUtils { public static String uploadPic(byte[] pic, String name, long size){ String path = null; //ClassPath下的文件Spring ClassPathResource resource = new ClassPathResource("fdfs_client.conf"); try { ClientGlobal.init(resource.getClassLoader().getResource("fdfs_client.conf").getPath()); //客服端 TrackerClient trackerClient = new TrackerClient(); TrackerServer trackerServer = trackerClient.getConnection(); //連接小弟 StorageClient1 storageClient1 = new StorageClient1(); //擴展名, 獲取擴展名, apach 下common包中已有公用方法. String extension = FilenameUtils.getExtension(name); //設置圖片meta信息 NameValuePair[] meta_list = new NameValuePair[3]; meta_list[0] = new NameValuePair("filename", name); meta_list[1] = new NameValuePair("fileext", extension); meta_list[2] = new NameValuePair("filesize", String.valueOf(size)); //上傳且返回path path = storageClient1.upload_file1(pic, extension, meta_list); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return path; } }
這里是FastDFS的核心方法, 這里將tracker比喻成老大,將storage比喻成小弟. 且為這個圖片添加 一些meta信息, 最后調用upload_file1 將圖片上傳到圖片服務器且返回path.
整個開發流程就是這樣, 記錄于此 愿日后回顧復習能夠有更大的收獲.
上面我們已經說到ajax請求異步上傳, 那么這里我們再來說下多圖片上傳, 如果單張圖片上傳已經搞清楚的話,那么單圖片上傳就顯得很簡單了.
首先我們繼續來查看jsp頁面:
這個js用來處理點擊上傳后做的事情, 其中回顯數據使用了從controller層接收回來的數據, 然后使用foreach進行遍歷, 那么接下來我們來看下controller層做的事情:
//上傳多張圖片 @RequestMapping(value="/uploadPics.do") public @ResponseBody List<String> uploadPics(@RequestParam(required=false) MultipartFile[] pics, HttpServletResponse response) throws Exception{ //多張圖片的路徑容器 List<String> paths = new ArrayList<String>(); for (MultipartFile pic : pics) { //Java接口連接FastDFS String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize()); paths.add(Constants.img_url+path); } return paths; }
使用foreach將圖片的url地址全部都裝載到一個list集合中, 然后返回給ajax請求函數.
Service層:
@Service("uploadService") public class UploadServiceImpl implements UploadService { //上傳 public String uploadPic(byte[] pic, String name, long size){ return FastDFSUtils.uploadPic(pic, name, size); } }
一切都還是老樣子, 只不過 controller層和jsp都是用了foreach去遍歷, 而且jsp中多加了一個屬性:multiple="multiple". 僅此而已.
到此這篇關于Java實現圖片上傳至FastDFS入門教程的文章就介紹到這了,更多相關Java圖片上傳至FastDFS內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家!
原文鏈接:https://www.cnblogs.com/wang-meng/p/5800997.html