자바 는 Jersey 를 통 해 클 라 이언 트 이미지 업로드 예제 를 실현 합 니 다.

이전 노트<SpringMVC 구현 이미지 업로드>사진 을 로 컬 에 업로드 하 는 실현 을 기록 했다.많은 프로젝트 에서 전문 적 인 파일 서버 가 파일 을 저장 할 것 이다.여기 에는 클 라 이언 트 가 Jersey 를 통 해 파일 서버 에 사진 을 올 리 는 실현 을 기록 했다.
서로 다른 호스트 에 파일 을 업로드 해 야 하기 때문에 스 트림 을 통 해 직접 쓸 수 없습니다.웹 서 비 스 를 통 해 이 루어 져 야 합 니 다.Jersey 는 자바 의 경량급 RESTful 스타일 의 웹 서비스 프레임 워 크 로 클 라 이언 트 파일 업로드 가 더욱 간단 해 집 니 다.
1.maven 의존
spring 의 일부 가방 과 fileupload 와 io 가방 은 여기에 붙 이지 않 습 니 다.

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

2.tomcat 의 conf/web.xml 파일 설정
파일 서버 에 있 는 이 파일 을 열 고 readonly 라 는 단 어 를 검색 하면 설명 코드 를 볼 수 있 습 니 다.

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

설명 을 통 해 기본적으로 put 나 delete 작업 을 할 때 서버 가 접근 을 거부 하기 때문에 서버 에 파일 을 업로드 하려 면 readonly 속성 을 false 로 설정 해 야 합 니 다.

<servlet>
  <servlet-name>default</servlet-name>
  <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
  <!--   ，  jersey     403   -->
  <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.파일 서버 에 파일 저장 디 렉 터 리 만 들 기

웹 앱 아래 에 upload 디 렉 터 리 를 만 듭 니 다.디 렉 터 리 를 찾 을 수 없 도록 빈 디 렉 터 리 에 파일 을 마음대로 추가 합 니 다.
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 {
    //           CommonsMultipartResolver
    CommonsMultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
    //   form    enctype＝"multipart／form－data"
    if (resolver.isMultipart(request)) {
      //     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;

        //                ，              ，    webService   ，    Jersey   
        Client client = Client.create();

        //           ，                  
       if (StringUtils.isNotBlank(lastRealPath)) {
         WebResource webService = client.resource(lastRealPath);
         webService.delete();
       }
       WebResource webService = client.resource(realPath);
       //         
       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 를 통 해 그림 업 로드 를 실현 해 야 합 니 다.여 기 는 jquery.form.js 플러그 인 을 사용 합 니 다.
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", //         
    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("    ");
    }
  }; 
  $("#form").ajaxSubmit(option);
}

6.흔 한 오류
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
프로젝트 가 8888 포트 에 배치 되 고 시작 되 었 는 지 확인 하고 프로젝트 에 upload 디 렉 터 리 가 존재 하 는 지 확인 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.