在上一篇筆記 《SpringMVC實(shí)現(xiàn)圖片上傳》記錄了將圖片上傳到本地的實(shí)現(xiàn)，在很多項(xiàng)目中都會(huì)有一臺(tái)專門的文件服務(wù)器來(lái)保存文件的，這邊記錄下客戶端通過(guò)jersey上傳圖片到文件服務(wù)端的實(shí)現(xiàn)。

由于要在不同主機(jī)上上傳文件，所以不能直接通過(guò)流的方式來(lái)寫，需要通過(guò)webService來(lái)完成，jersey是基于Java的一個(gè)輕量級(jí)RESTful風(fēng)格的Web Services框架，它讓客戶端文件上傳變得更簡(jiǎn)單。

1. maven依賴

spring的一些包以及fileupload和io包這邊就不貼出來(lái)了。

 <dependency>
       <groupId>com.sun.jersey</groupId>
       <artifactId>jersey-client</artifactId>
       <version>1.2</version>
 </dependency>

2. 配置tomcat下的conf/web.xml文件

打開(kāi)文件服務(wù)器下的此文件，然后搜索readonly這個(gè)單詞，可以看到這段注釋代碼：

<!--   readonly            Is this context "read only", so HTTP       -->
<!--                       commands like PUT and DELETE are           -->
<!--                       rejected?  [true]                          -->

通過(guò)注釋可以看到默認(rèn)情況下當(dāng)我們進(jìn)行put或者delete操作的時(shí)候，服務(wù)器是拒絕訪問(wèn)的，所以想向服務(wù)器上傳文件必須將readonly屬性設(shè)置為false。

<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)建文件存儲(chǔ)目錄

文件存儲(chǔ)目錄.png

在webapp下創(chuàng)建一個(gè)upload目錄，為了防止找不到目錄，在空目錄下隨便添加一個(gè)文件。

4. controller代碼

@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("."));
              
                // 要上傳文件的絕對(duì)路徑
               String realPath = MallUtil.readProp("upload_file_path") + "/upload/" + fileName + suffix;
               String relativePath = "/upload/" + fileName + suffix;

               // 由于我們要在不同主機(jī)上上傳文件，所以不能直接通過(guò)流的方式來(lái)寫，需要通過(guò)webService來(lái)完成，這邊借助Jersey來(lái)完成
               Client client = Client.create();

               // 判斷是不是第一次上傳，如果已經(jīng)上傳過(guò)則刪除上一次上傳的文件
              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. 頁(yè)面代碼

需要回顯就需要通過(guò)ajax來(lái)實(shí)現(xiàn)圖片上傳，這里使用的是jquery.form.js這個(gè)插件

jsp代碼：

<form enctype="multipart/form-data" id="form">      
<div>
   ![](${path}/mall/image/load_image.png)
   <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代碼：

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 != ""); // 沒(méi)有選擇圖片，則中斷上傳請(qǐng)求
        },
        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. 常見(jiàn)錯(cuò)誤

• 403 則是conf/web.xml中沒(méi)有添加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目錄。