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

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接口！<br>请升级或更换高版本浏览器！');
        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文件：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="文件路径/plugins/cos-js-sdk-v4.js"></script>