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 

騰訊雲檔案上傳

// 騰訊雲上傳方法
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檔案：