在[FINE UPLOADER]中显示以前上传的图片 [英] show previously uploaded images in [FINE UPLOADER]

问题描述

我正在使用优良的上传插件来上传图片。图片上传工作正常。我想要做的是当图片上传后，页面刷新精细上传应显示以前上传的图像。

这是我的代码..

$ b $（b
$ b $ $ $ $'code $（'＃accordion'）。（'shown.bs.collapse'，function（）{
activeShopId1 = $（。 （'$'）;
$ b $（'＃'+ activeShopId1 +'＃fine-uploader-gallery'+'.single-image'）。fineUploader（{ b $ b模板：'qq-template-gallery'，
请求：{
端点：'upload_internal_image'
}，

验证：{
allowedExtensions：['jpeg'，'jpg'，'gif'，'png']，
itemLimit：1
}，
messages：{
tooManyItemsError：'您只能添加1个图像'
}，
deleteFile：{
enabled：true，
forceConfirm：true，
endpoint：'delete_internal_image'
}，
回调：{
onSubmit：function（id，fileName）{
this.setParams（{shop_id：shopId4Map}）;
}，
}，
}）;

））

提前致谢 $ b $在创建一个新的Fine Uploader实例时（例如在页面加载时），要显示先前上传的图像或一般文件，您应该使用初始文件列表功能。

为此，您必须提供会话端点选项，如下所示：

 会话：{
端点：'/初始/文件'
} 
  

Fine Uploader会发送一个GET请求这个端点，你的服务器必须响应一个包含对象的JSON数组，这些对象代表要显示在列表中的每个文件。

以下是每个对象的下列属性，上传器识别（* =必填）：

• * name ：String - 该文件。


• * uuid ：String - 文件的UUID。


• size ：Number - 文件的大小，以字节为单位。
• deleteFileEndpoint ：String - 关联的删除文件
  请求的端点。如果省略，则使用deleteFile.endpoint。


• deleteFileParams ：Object - 要与
  相关联的删除文件请求。如果省略，deleteFile.params是
  。


• thumbnailUrl ：String - 要显示的图像的URL文件。
  
• * s3Key ：String - S3存储桶中文件的密钥。仅在使用Fine Uploader S3时才需要。


• * s3Bucket ：String - 文件存储在S3中的存储桶的名称。只有在使用Fine Uploader S3时，并且如果存储桶不能通过检查端点URL（例如，通过CDN路由
  ）才能确定
  ，那么这个操作就是必需的。
  
• code> blobName ：String - Azure Blob存储容器中文件的名称。只有在使用Fine Uploader Azure时才需要。

响应将被转换为JavaScript数组并传递给您的sessionRequestComplete事件处理程序。所以，通过服务器响应传递的任何非标准对象属性也将被传递给你的事件处理程序。

I am using fine uploader plugin to upload images. The image upload is working fine. What I am trying to do is when the page is refreshed after image upload fine uploader should show previously uploaded images.

Here is my code..

$('#accordion').on('shown.bs.collapse', function () {
    activeShopId1 = $(".collapse.in").attr("id");

    $('#' + activeShopId1 + '  #fine-uploader-gallery' + '.single-image').fineUploader({
        template: 'qq-template-gallery',
        request: {
            endpoint: 'upload_internal_image'
        },

        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            itemLimit: 1
        },
        messages: {
        tooManyItemsError: 'You can only add 1 image'
            },
        deleteFile: {
            enabled: true,
            forceConfirm: true,
            endpoint: 'delete_internal_image'
        },
        callbacks: {
            onSubmit: function (id, fileName) {
                this.setParams({shop_id: shopId4Map});
            },
        },
    });

})

Thanks in advance.

解决方案

To show previously uploaded images or general files when creating a new Fine Uploader instance (such as on page load), you should make use of the "initial file list" feature.

To do this, you must contribute a session endpoint option, like this:

session: {
   endpoint: '/initial/files'
}

Fine Uploader will send a GET request to this endpoint, and your server must response with a JSON array containing objects that represent each file to be displayed in the list.

Here are the following properties of each Object that Fine Uploader recognizes (* = required):

• *name: String - Name of the file.
• *uuid: String - UUID of the file.
• size: Number - Size of the file, in bytes.
• deleteFileEndpoint: String - Endpoint for the associated delete file request. If omitted, the deleteFile.endpoint is used.
• deleteFileParams: Object - Parameters to send along with the associated delete file request. If omitted, deleteFile.params is used.
• thumbnailUrl: String - URL of an image to display next to the file.
• *s3Key: String - Key of the file in your S3 bucket. Only required if using Fine Uploader S3.
• *s3Bucket: String - Name of the bucket where the file is stored in S3. Only required if using Fine Uploader S3 and if the bucket cannot be determined by examining the endpoint URL (such as when routing through a CDN).
• *blobName: String - Name of the file in your Azure Blob Storage container. Only required if using Fine Uploader Azure.

The response will be converted into a JavaScript Array and passed to your sessionRequestComplete event handler. So, any non-standard object properties passed with your server response will also be passed to your event handler.

这篇关于在[FINE UPLOADER]中显示以前上传的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！