如何在CKEditor中顯示上傳進度？

Question

我正在添加一個允許用戶上傳和顯示視頻到CKEditor的插件。 文件的大小可能很大，所以我想顯示上傳進度。

目前我使用默認的FileBrowser API來顯示上傳按鈕，但該文檔沒有提及顯示進度。

我怎樣才能做到這一點？ 或者我是否需要編寫自己的上傳插件？

Answer 1

您可以觸發事件發射器以檢查上載是否正在進行中

使用nodejs上傳s3的示例代碼

function s3uploads(filePath, callback){

var localFile = filePath;

    var onlyFileName = localFile.split("/");
    var fname = (onlyFileName[onlyFileName.length - 1]);

    var params = {
        localFile: localFile,

        s3Params: {
            Bucket: "ss3bucket",
            Key: "folder-name/" + fname,
            ACL: 'public-read',
            CacheControl: 'max-age=31536000',
            Expires: new Date || 'Wed Dec 31 2099 16:00:00 GMT-0800 (PST)'
            || 123456789
        }
    };

    var uploader = client.uploadFile(params);
            uploader.on('error', function (err) {
                console.error("unable to upload:", err.stack);
                return callback(err,null)
            });
            uploader.on('progress', function () {
                console.log("progress", uploader.progressMd5Amount,
                    uploader.progressAmount, uploader.progressTotal);
                var percentCal = ((parseInt(uploader.progressAmount) * 100) / parseInt(uploader.progressTotal)).toFixed(2);
                var percent = percentCal.toString();
                return callback(null,{type : 'progress', percent: percent, url : null});
            });
            uploader.on('end', function () {
                console.log("done uploading");

                return callback(null,{type : 'end', percent: '100', url : 'https://s3.us-east-2.amazonaws.com/s3bucket/folder-name/' + fname});

            });
}

在要調用此函數的代碼塊中，可以在進度狀態處於活動狀態時使用response.write（），當達到最終狀態時，您可以傳遞res.end（）

s3uploads(fileUrl, function (err, uploadResult) {
                if(err){
                    res.send("error");
                }

                if(uploadResult.type === 'progress'){
                    var html =  "<p>Please wait its uploading to server </p> <p></p>" ;

                    res.write(html);

                } else {
                    fileUrl = uploadResult.url;

                    res.write("<script type='text/javascript'>\
 (function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();\
 window.parent.CKEDITOR.tools.callFunction('" + CKEcallback + "','" + fileUrl + "', '" + msg + "');\
 </script>");
                    res.end();
                }

            });