html5 dzzxjbd cn,UEditor实现单张图片上传至腾讯云（对象存储服务）功能（html5

UEditor文件上传默认只支持后端语音，因为项目是前后端分离开发，所以需要前端自行实现图片上传。

这里是直接修改的 ueditor/ueditor.all.js文件

ueditor.all.js中找到：

// plugins/simpleupload.js

UE.plugin.register("simpleupload", function (){ ...

【代码中新增三个方法：readImgFile(), toBlobData(), upload()】

// 原代码

domUtils.on(input, "change", function(){

if(!input.value) return;

// 修改为

domUtils.on(input, "change", function(e){ // 传值e

if(!input.value) return;

var file = e.target.files[0]; // 获取文件

// 代码中找到

function callback(){

try{

var link, json, loader,

...

// 修改为

function callback(){

try{

// var link, json, loader,

// body = (iframe.contentDocument || iframe.contentWindow.document).body,

// result = body.innerText || body.textContent || "";

//

// json = (new Function("return " + result))();

// link = me.options.imageUrlPrefix + json.url;

// 读取文件

readImgFile(file, function (data){

// 转码文件，大图等比缩放

toBlobData(data, function (blob) {

// 上传至腾讯云

upload(blob, function(res) {

// 获取上传成功后文件URL

var src = res.data.source_url;

if (src) {

// 腾讯云文件，转为万象优图图片

var url = src.toString().replace(".cos", ".pic") + "?imageView2";

loader = me.document.getElementById(loadingId);

loader.setAttribute("src", url);

loader.setAttribute("_src", url);

loader.setAttribute("title", file.name);

loader.setAttribute("alt", file.name);

loader.removeAttribute("id");

domUtils.removeClasses(loader, "loadingclass");

} else {

showErrorLoader && showErrorLoader(json.state);

}

});

});

});

}catch(er){

showErrorLoader && showErrorLoader(me.getLang("simpleupload.loadError"));

}

本地文件读取方法，html5 FileReader

/**

* 读取本地图片数据

* @param {Object} file 图片文件

* @param {Object} callback 回调图片数据

*/

function readImgFile(file, callback) {

if (typeof FileReader === undefined ) {

alert("您的浏览器不支持FileReader接口！
请升级或更换高版本浏览器！");

return false;

}

var reader = new FileReader();

//将文件以Data URL形式读入页面

reader.readAsDataURL(file);

reader.onload = function (e) {

callback(e.target.result);

}

};

利用canvas等比缩小大图，并再次转换数据格式

/**

* 大图缩小，数据格式二次转换blob

* @param {Object} urlData 图片url数据

* @param {Object} callback 图片blob数据

*/

function toBlobData (urlData, callback) {

// 创建图片

var image = new Image();

image.src = urlData;

// 原始图片尺寸

var iw = image.width,

ih = image.height;

// canvas尺寸

var cw, ch;

// 将width > 640 的图片进行压缩

if (iw > 640) {

cw = 640;

ch = Math.ceil(cw*(ih/iw));

}

console.log(iw + "+" + ih);

console.log(cw + "+" + ch);

// 生成裁剪后图片

var canvas = document.createElement("canvas");

canvas.width = cw;

canvas.height = ch;

ctx = canvas.getContext("2d");

ctx.drawImage(image, 0, 0, iw, ih, 0, 0, cw, ch);

// 获取 canvas 中图片的信息，用 toDataURL 就可以转换成上面用到的 DataURL 。

// 然后取出其中 base64 信息，再用 window.atob 转换成由二进制字符串。

// 但 window.atob 转换后的结果仍然是字符串，直接给 Blob 还是会出错。

// 所以又要用 Uint8Array 转换一下。

var data = canvas.toDataURL("image/jpeg");

// dataURL 的格式为 “data:image/png;base64,****”,

// 逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了

data = data.split(",")[1];

data = window.atob(data);

var ia = new Uint8Array(data.length);

for (var i = 0; i < data.length; i++) {

ia[i] = data.charCodeAt(i);

};

// canvas.toDataURL 返回的默认格式就是 image/jpeg

var blob = new Blob([ia], {type:"image/jpeg"});

callback(blob);

};

腾讯云文件上传

// 腾讯云上传方法

function upload(data, callback) {

var now = new Date();

var region = "gz";

var successCallBack = function (result) {

console.log(" upload success...")

console.log(result)

callback(result);

};

var errorCallBack = function (result) {

result = result || {};

console.log(" upload error...")

console.log(result.responseText || "error");

};

var progressCallBack = function (curr) {

console.log(" uploading... curr progress is " + curr)

};

// 文件上传签名

// 这个需要自己配置

// 详见腾讯云Api文档

var signData = {

"filesign": "lWlcFgkK6j5Uql5FAbLbv/DdvalhPTEyNTMxNTAxOTMmaz1BS0lEZ01JRTBkQ2N5THBEUE90YnMzMnBUMExjbDVEREdxU3cmZT0xNDg5MDc1MjAwJnQ9MTQ4OTA0MjI5OCZyPTgzMzgzMTg3MCZmPSZiPXhtcXZpcA==",

"appid": "11111111",

"bucket": "仓库名称",

"filedir": "file/2017/03/09/"

}

var sign = encodeURIComponent(signData.filesign),

appid = signData.appid,

bucket = signData.bucket,

folder = signData.filedir;

var cos = new CosCloud({

appid: appid, // APPID 必填参数

bucket: bucket, // bucketName 必填参数

region: region, // 地域信息 必填参数 华南地区填gz 华东填sh 华北填tj

getAppSign: function (callback) {

callback(sign);

},

getAppSignOnce: function (callback) {

callback(sign);

}

});

var file = data;

// 文件名

var saveFile = new Date().getTime() + ".jpg";

cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, folder + saveFile, file, 1);

//insertOnly==0 表示允许覆盖文件 1表示不允许

}

上传至腾讯云，需要引入js文件：