如何在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();
                }

            });