Question

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

我的代码：

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函数在上传后成功调用，但没有绘制缩略图。

我的代码有什么问题？我该怎么做才能画出缩略图？

Answer 1

问题是您没有正确调用drawThumbnail方法。根据{{3}}，第一个参数是关联文件的ID。因此，您的onComplete回调应如下所示：

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

并且您的updatePicture函数必须更改为：

function updatePicture(fileId) {
    uploader.drawThumbnail(fileId, document.getElementById('picture'), 200, true);    
}

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

1 个答案: