2016-06-08 1 views
0

안녕하세요 저는 업 로더를 사용하여 성공적으로 완료된 업로딩 기능을 사용하고 있습니다.하지만 편집을위한 새로운 기능에 대해서는 동일한 플러그인을 검색하여 해당 세션이이 기능을 처리 할 수 ​​있음을 알았습니다.업로더의 썸네일 이미지를 볼 수 없습니다

하지만 아래에서 볼 수있는 것처럼 나는 훌륭한 업 로더 섹션의 이미지를 볼 수 없습니다.

enter image description here

나는 응답으로 이름, UUID 및 thumbnailUrl을 전달하고있다.

편집 : 서버 측에서 :

List<PropertyImageEntity> propertyImageEntity=propertyService.getImagesUrlNames(Integer.parseInt(request.getParameter("id")),Constant.PROP_VAL); 
     for(PropertyImageEntity propertyImagesDetails: propertyImageEntity) 
     { 
      ImageDataResponse imageResponseData=new ImageDataResponse(); 
      imageResponseData.setName(propertyImagesDetails.getFilename()); 
      String test=String.valueOf(UUID.randomUUID()); 
      imageResponseData.setUuid(this.uuid); 
      imageResponseData.setId(String.valueOf(propertyImagesDetails.getImageid())); 
      imageResponseData.setSize(propertyImagesDetails.getSize()); 
      imageResponseData.setStatus("upload successful"); 
      imageResponseData.setThumbnailUrl(propertyImagesDetails.getUrl()); 
      imageResponse.add(imageResponseData); 
     } 

클라이언트 측 :

var manualUploader1 = new qq.FineUploader(
     { 
      element : document 
        .getElementById('fine-uploader-manual-trigger1'), 
      template : 'qq-template-manual-trigger1', 
      request : { 
       endpoint : '/server/uploads?${_csrf.parameterName}=${_csrf.token}&id=${id}' 
      }, 
      thumbnails : { 
       placeholders : { 
        waitingPath : '../assets/js/property/fileupload/placeholders/waiting-generic.png', 
        notAvailablePath : '../assets/js/property/fileupload/placeholders/not_available-generic.png' 
       } 
      }, 
      validation : { 
       allowedExtensions : [ 'png', 'jpeg', 'jpg' , 'gif'], 
       itemLimit : 6, 
       sizeLimit : 100000000 
      }, 
      autoUpload : false, 
      debug : true, 
      callbacks: { 
       onError: function(id, name, errorReason, xhrOrXdr) { 

         $("#errorMsg4").html(errorReason); 
       } 
      }, 
      session: { 
       endpoint: '/server/get?id=${id}', 
       params: {}, 
       customHeaders: {}, 
       refreshOnReset: true 
      }, 
      messages: { 
       typeError: jQuery.i18n.prop("invalid.extention.error"), 
       sizeError: jQuery.i18n.prop("upload.filesize.error"), 
       noFilesError: jQuery.i18n.prop("nofiles.toupload.error"), 
       tooManyItemsError: jQuery.i18n.prop("toomany.items.error"), 
       retryFailTooManyItems: jQuery.i18n.prop("retry.fail.error") 
      } 
     }); 

qq(document.getElementById("trigger-upload1")).attach("click", 
     function() { 
     $("#errorMsg4").html(""); 
      manualUploader1.uploadStoredFiles(); 
     }); 

하지만 콘솔의 이미지 URL에 대한 응답을 확인 (200)을 표시합니다.

응답 :

[{"name":"b.png","uuid":"e3a5581e-aee9-4b8d-813f-63e0d400c9bc","thumbnailUrl":"http://192.168.1.68/html/1465290007617b.png","id":"84","size":26507,"status" 
:null}] 

콘솔 로그 :

enter image description here

+0

브라우저 콘솔에 어떤 메시지가 표시됩니까? –

+0

그리고 코드를 보여줄 필요가 있습니다 –

+0

@RayNicholus 내가 업데이트 한 게시물 \ –

답변

1

상기 문제는 apache2.conf의 고르에 헤더를 추가함으로써 해결되었다.

Header set Access-Control-Allow-Origin "*" 

@Ray 덕분에 그의 대답은 this입니다.