七牛云：ckeditor JS SDK 结合 C#实现多图片上传。

Posted 2020-08-08 KMSFan

成功了，搞了2天。分享一下经验。

首先是把官方的那个例子下载下来，然后照如下的方式修改。

其中tempValue是一个全局变量。

function savetoqiniu() {

	var uploader = Qiniu.uploader({
	runtimes: "html5,flash,html4",
	browse_button: "setfile",
	    save_key:false,
	//uptoken: qiniu_uptoken,
	get_new_uptoken: true,
	uptoken_func:function()
	{
	    tempValue=GetFileInfo();
	    var res = $.ajax({
	        type: "get",
	        data: {
	            key: tempValue
	        },
	        url: "/goods/CkeditorGetUploadToken/",
	            async: false
	    });
	    return JSON.parse(res.responseText).uptoken;
	},
	//uptoken_url: "/goods/CkeditorGetUploadToken?key=" + tempValue,
	domain: qiniu_bucket_domain,
	container: "container",
	max_file_size: "6mb",
	filters: {
		mime_types: [{
			title: "Image files",
			extensions: "jpeg,jpg,gif,png,wbmp"
		}]
	},
	flash_swf_url: "./Moxie.swf",
	max_retries: 3,
	dragdrop: true,
	drop_element: "container",
	chunk_size: "4mb",
	auto_start: false,
	init: {
		"PostInit": function() {
			document.getElementById("uploadfile").onclick = function() {
				//document.getElementById("setfile").style.display = "none";
				uploader.start();
				return false
			}
		},
		"FilesAdded": function(up, files) {
			plupload.each(files,
			function(file) {
			    document.getElementById("fileinfo").innerHTML += ‘<div id="‘ + file.id + ‘">‘ + file.name + "   (" + plupload.formatSize(file.size) + ")      <b></b>	<i></i></div><br>";
			    //var key = Math.round(new Date().getTime() / 1000) + "_" + file.name;
			    //keyQiniuUpload = key;
			    //Test2();
			})
		},
		"BeforeUpload": function (up, file) {
		    
        },
		"UploadProgress": function(up, file) {
			document.getElementById(file.id).getElementsByTagName("b")[0].innerHTML = "<span>" + file.percent + "%</span>"
		},
		"FileUploaded": function(up, file, info) {
			var res = JSON.parse(info);
			var sourceLink = qiniu_bucket_domain + "/" + res.key;
			document.getElementById(file.id).getElementsByTagName("i")[0].innerHTML = sourceLink;
			window.CKEDITOR.tools.callFunction(1, sourceLink, ‘ok‘);
		},
		"Error": function(up, err, errTip) {},
		"UploadComplete": function() {},
		"Key": function(up, file) {
		    var key = tempValue;
			console.log(up);

			return key;
		}
	}
});
}

　　另外注意一点，就是KEY要传到后台去的，每次的KEY不同。下面是C#代码。

        /// <summary>
        /// 获得CKEDITOR上传凭证
        /// </summary>
        /// <returns></returns>
        public ActionResult CkeditorGetUploadToken(string key)
        {
           string s= UploadUtil.GetUploadToken("kmsfan",key);

            if (!string.IsNullOrEmpty(s))
            {
                token token1 = new token();
                token1.uptoken = s;
                s = JsonConvert.SerializeObject(token1);
                //HttpContext.Response.ContentType = "text/plain";
                return Content(s);
                //return Json(new { uptoken = s});
            }
            return Json(new { IsSuccess = false });
        }

　　网上还没找到类似的解法，我这人不太善于表达，如果有需要的话，不懂的，请在底下留言。