在上一篇筆記 《SpringMVC實(shí)現(xiàn)圖片上傳》記錄了將圖片上傳到本地的實(shí)現(xiàn)，在很多項(xiàng)目中都會(huì)有一臺專門的文件服務(wù)器來保存文件的，這邊記錄下客戶端通過jersey上傳圖片到文件服務(wù)端的實(shí)現(xiàn)。
由于要在不同主機(jī)上上傳文件，所以不能直接通過流的方式來寫，需要通過webService來完成，jersey是基于Java的一個(gè)輕量級RESTful風(fēng)格的Web Services框架，它讓客戶端文件上傳變得更簡單。
1. maven依賴
spring的一些包以及fileupload和io包這邊就不貼出來了。
|
1
2
3
4
5
|
<dependency> <groupId>com.sun.jersey</groupId> <artifactId>jersey-client</artifactId> <version>1.2</version></dependency> |
2. 配置tomcat下的conf/web.xml文件
打開文件服務(wù)器下的此文件，然后搜索readonly這個(gè)單詞，可以看到這段注釋代碼：
|
1
2
3
|
<!-- readonly Is this context "read only", so HTTP --><!-- commands like PUT and DELETE are --><!-- rejected? [true] --> |
通過注釋可以看到默認(rèn)情況下當(dāng)我們進(jìn)行put或者delete操作的時(shí)候，服務(wù)器是拒絕訪問的，所以想向服務(wù)器上傳文件必須將readonly屬性設(shè)置為false。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<servlet> <servlet-name>default</servlet-name> <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class> <!-- 添加，解決jersey上傳服務(wù)器403錯(cuò)誤 --> <init-param> <param-name>readonly</param-name> <param-value>false</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>0</param-value> </init-param> <init-param> <param-name>listings</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup></servlet> |
3. 在文件服務(wù)器上創(chuàng)建文件存儲目錄
在webapp下創(chuàng)建一個(gè)upload目錄，為了防止找不到目錄，在空目錄下隨便添加一個(gè)文件。
4. controller代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
@Controller@RequestMapping("/upload")public class UploadController extends BaseController { @RequestMapping(value = "/uploadPic", method = RequestMethod.POST) @LoginCheck public void uploadPic(HttpServletRequest request, PrintWriter out, String lastRealPath) throws IOException { // 將當(dāng)前上下文初始化給CommonsMultipartResolver CommonsMultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext()); // 檢查form中是否有enctype＝"multipart／form－data" if (resolver.isMultipart(request)) { // 強(qiáng)制轉(zhuǎn)化request MultipartHttpServletRequest req = (MultipartHttpServletRequest) request; // 從表單獲取input名稱 Iterator<String> iterable = req.getFileNames(); // 存在文件 if (iterable.hasNext()) { String inputName = iterable.next(); // 獲得文件 MultipartFile mf = req.getFile(inputName); byte[] mfs = mf.getBytes(); // 定義文件名 String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()); Random random = new Random(); for (int i = 0; i < 3; i++) { fileName = fileName + random.nextInt(10); } // 獲得后綴名 String oriFileName = mf.getOriginalFilename(); String suffix = oriFileName.substring(oriFileName.lastIndexOf(".")); // 要上傳文件的絕對路徑 String realPath = MallUtil.readProp("upload_file_path") + "/upload/" + fileName + suffix; String relativePath = "/upload/" + fileName + suffix; // 由于我們要在不同主機(jī)上上傳文件，所以不能直接通過流的方式來寫，需要通過webService來完成，這邊借助Jersey來完成 Client client = Client.create(); // 判斷是不是第一次上傳，如果已經(jīng)上傳過則刪除上一次上傳的文件 if (StringUtils.isNotBlank(lastRealPath)) { WebResource webService = client.resource(lastRealPath); webService.delete(); } WebResource webService = client.resource(realPath); // 將文件傳到主機(jī)上 webService.put(mfs); // 將圖片信息返回給界面回顯 Map<String, String> map = new HashMap<String, String>(); map.put("realPath", realPath); map.put("relativePath", relativePath); // {"relativePath":"/upload/20170215135233634679.png","realPath":"http://localhost:8088/mall-file/upload/20170215135233634679.png"} out.write(JsonUtil.jsonString(map)); } } }} |
5. 頁面代碼
需要回顯就需要通過ajax來實(shí)現(xiàn)圖片上傳，這里使用的是jquery.form.js這個(gè)插件
jsp代碼：
|
1
2
3
4
5
6
7
8
|
<form enctype="multipart/form-data" id="form"> <div>  <input type="file" id="input-image" name="input-image" onchange="submitUpload()"> <input id="input-relative-path" name="imgs" type="hidden" > <input id="input-last-path" type="hidden"> </div></form> |
js代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function submitUpload() { var option = { url: path + "/upload/uploadPic.do", type: "post", dataType: "text", // 返回值的數(shù)據(jù)類型 beforeSubmit: function (formData, jqForm, options) { var imageValue = $("#input-image").val(); imageValue = $.trim(imageValue); return (imageValue != ""); // 沒有選擇圖片，則中斷上傳請求 }, success: function (responseText) { // {"relativePath":"/upload/20170215135233634679.png","realPath":"http://localhost:8088/mall-file/upload/20170215135233634679.png"} var jsonObj = $.parseJSON(responseText); $("#image").attr("src", jsonObj.realPath); $("#input-relative-path").val(jsonObj.relativePath); $("#input-last-path").val(jsonObj.realPath); }, error: function () { alert("系統(tǒng)錯(cuò)誤"); } }; $("#form").ajaxSubmit(option);} |
6. 常見錯(cuò)誤
403 則是conf/web.xml中沒有添加readonly為false的配置
409 : com.sun.jersey.api.client.UniformInterfaceException:
PUT http://localhost:8888/mall-file/upload/20170115104302348740.jpg returned a response status of 409 Conflict
確保項(xiàng)目部署在8888端口下并啟動(dòng)成功，確保項(xiàng)目中存在upload目錄。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：http://www.jianshu.com/p/d611fdd0f70c
