无法在精细上传器中查看缩略图上的图像

Question

您好，我正在研究上传功能，该功能已使用 fine uploader 成功完成，但对于新的编辑功能，我搜索了相同的插件，发现会话可以处理此功能。

但我没有看到精细上传器部分中的图像，如下是我得到的视图。

我正在传递名称、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}]

控制台日志：

Answer 1

在apache2.conf.

中添加corsheaders解决了上述问题

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

感谢@Ray 在 this post 上的回答。

无法在精细上传器中查看缩略图上的图像

Unable to view image on thumbnail in fine-uploader

javascript

jquery

fine-uploader