在[精细上传器]中显示以前上传的图像

show previously uploaded images in [FINE UPLOADER]

本文关键字：显示 图像      更新时间：2023-09-26

我正在使用精美的上传器插件上传图像。图像上传工作正常。我正在尝试做的是在图像上传后刷新页面时，精细上传器应该显示以前上传的图像。

这是我的代码。

$('#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});
            },
        },
    });
})

提前谢谢。

要在创建新的 Fine Uploader 实例时（例如在页面加载时）显示以前上传的图像或常规文件，您应该使用"初始文件列表"功能。

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

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

Fine Uploader 将向此端点发送 GET 请求，您的服务器必须使用 JSON 数组进行响应，该数组包含表示要在列表中显示的每个文件的对象。

以下是 Fine Uploader 识别的每个对象的以下属性（* = 必需）：

  • * name：字符串 - 文件名。
  • * uuid：字符串 - 文件的 UUID。
  • size ： 数字 - 文件大小，以字节为单位。
  • deleteFileEndpoint：字符串 - 关联删除文件的端点请求。如果省略，则使用 deleteFile.endpoint。
  • deleteFileParams ： 对象 - 要与关联的删除文件请求。如果省略，则 deleteFile.params 为使用。
  • thumbnailUrl：字符串 - 要在文件旁边显示的图像的 URL。
  • * s3Key ：字符串 - S3 存储桶中文件的键。仅当使用精细上传程序 S3 时才需要。
  • * s3Bucket ：字符串 - 在 S3 中存储文件的存储桶的名称。仅当使用精细上传程序 S3 且存储桶无法通过检查终结点 URL（例如在路由时）来确定通过 CDN）。
  • * blobName：字符串 - Azure Blob 存储容器中文件的名称。仅当使用精细上传程序 Azure 时才需要。

响应将被转换为 JavaScript 数组并传递给 sessionRequestComplete 事件处理程序。因此，与服务器响应一起传递的任何非标准对象属性也将传递给事件处理程序。

相关文章：