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

            });