Fine Uploader:无法从服务器加载缩略图

Fine-Uploader: fail to load a thumbnail from the server

本文关键字：服务器 加载 略图 Uploader Fine      更新时间：2023-09-26

我想在上传成功后绘制一个由服务器生成的缩略图。

我的代码：

function createUploader() {
    var uploader = new qq.FineUploader({
        element: document.getElementById('uploader_button'),
        multiple: false,
        display: {
            fileSizeOnSubmit: true
        },
        request: {
            endpoint: '/upload/newDocument',
            params: {
                token: '********'
            }
        },
        /* ...settings... */
        callbacks: {
            onComplete: updatePicture
        }
    });
    function updatePicture() {
        uploader.drawThumbnail(document.getElementById('picture'), 200, true);
    };
};

Html:

<img id="picture" src="/preview/empty.jpg" class="qq-thumbnail-selector">

服务器响应：

{"success":true,"thumbnailUrl":"'/preview'/00a64818c21a35ab59a342cc3e41182e50c06fa3528b128db22bb0.33508816.jpg"}

Fine Uploader日志输出：

[FineUploader 4.0.3] xhr - server response received for 0 fineuploader-4.0.3.min.js:16
[FineUploader 4.0.3] responseText = {"success":true,"thumbnailUrl":"'/preview'/00a64818c21a35ab59a342cc3e41182e50c06fa3528b128db22bb0.33508816.jpg"} fineuploader-4.0.3.min.js:16
[FineUploader 4.0.3] Received response status 200 with body: {"success":true,"thumbnailUrl":"'/preview'/00a64818c21a35ab59a342cc3e41182e50c06fa3528b128db22bb0.33508816.jpg"} fineuploader-4.0.3.min.js:16

上传后updatePicture函数调用成功，但未绘制缩略图。

我的代码出了什么问题？我应该怎么画缩略图？

问题是您没有正确调用drawThumbnail方法。根据文档，第一个参数是关联文件的ID。所以，你的onComplete回调应该是这样的：

onComplete: function(id) {
    updatePicture(id)
}

并且您的updatePicture功能必须更改为：

function updatePicture(fileId) {
    uploader.drawThumbnail(fileId, document.getElementById('picture'), 200, true);    
}
相关文章：