阿里雲oss雲存儲圖片上傳在wangEditor富文本編輯器上的集成

調用方式

html:
<textarea name="newsinfo_content" id="editor" style="height:500px;">
    <p></p>
</textarea>

<!-- 圖片上傳依賴js -->
<script src="~/dist/js/plugins/crypto1/crypto/crypto.js"></script>
<script src="~/dist/js/plugins/crypto1/hmac/hmac.js"></script>
<script src="~/dist/js/plugins/crypto1/sha1/sha1.js"></script>
<script src="~/dist/js/plugins/base64.js"></script>
<script src="~/dist/js/plugins/plupload-2.1.2/js/plupload.full.min.js"></script>
<script src="~/dist/js/wangEditUpload.js?v=1.0"></script>
<!-- 編輯器 -->
<script type="text/javascript" src="~/dist/js/plugins/wangEditor/wangEditor.min.js"></script>
<!-- oss存儲 -->
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

// 調用

        // 富文本編輯器
        var editor = new wangEditor('editor');

        editor.config.customUpload = true;  // 配置自定義上傳的開關
        editor.config.customUploadInit = uploadInit;  // 配置上傳事件，uploadInit方法已經在上面定義了
        // editor.config.uploadImgUrl = '/upload';
        // 普通的自定義菜單
        editor.config.menus = [
            'head',
            'bold',
            'underline',
            'italic',
            'strikethrough',
            'forecolor',
            'bgcolor',
            '|',
            'quote',
            'unorderlist',
            'orderlist',
            '|',
            'alignleft',
            'aligncenter',
            'alignright',
            '|',
            'link',
            'table',
            'img',
            'video',
            'eraser',
            'insertcode',
            'source',
            'fullscreen'
        ];
        editor.create();

wangEditUpload.js內容

var accessid = '阿里雲的accessid'; // 你阿里雲的accessid 
var accesskey = '阿里雲的accesskey'; // 你阿里雲的accesskey 
var host = 'http://blockname.oss-cn-shenzhen.aliyuncs.com'; // 你阿里雲的blockname和地區請對應更改

var objectNname = ' ';
var policyText = {
    "expiration": "2020-01-01T12:00:00.000Z", //設置該Policy的失效時間，超過這個失效時間以後，就沒有辦法經過這個policy上傳文件了
    "conditions": [
    ["content-length-range", 0, 2097152] // 設置上傳文件的大小限制
    ]
};

var policyBase64 = Base64.encode(JSON.stringify(policyText))
var message = policyBase64;
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true });
var signature = Crypto.util.bytesToBase64(bytes);
function add0(m) { return m < 10 ? '0' + m : m }
function getNewTime(now) {
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    var millsecond = now.getMilliseconds()
    return year + '' + add0(month) + '' + add0(date) + '' + add0(hour) + '' + add0(minute) + '' + add0(second) + '' + add0(millsecond);
}
function set_upload_param(up, filename, ret) {
    objectNname = '';
    if (filename != '') {
        objectNname = getNewTime(new Date()) + 'web';
    }
    new_multipart_params = {
        'key': objectNname,
        'policy': policyBase64,
        'OSSAccessKeyId': accessid,
        'success_action_status': '200', //讓服務端返回200,否則，默認會返回204
        'signature': signature,
    };

    up.setOption({
        'url': host,
        'multipart_params': new_multipart_params
    });
}
function uploadInit() {
    // this 即 editor 對象
    var editor = this;
    // 編輯器中，觸發選擇圖片的按鈕的id
    var btnId = editor.customUploadBtnId;
    // 編輯器中，觸發選擇圖片的按鈕的父元素的id
    var containerId = editor.customUploadContainerId;

    //實例化一個上傳對象
    var uploader = new plupload.Uploader({
        browse_button: btnId,  // 選擇文件的按鈕的id
        url: 'http://oss.aliyuncs.com', // 服務器端的上傳地址
        flash_swf_url: 'lib/plupload/plupload/Moxie.swf',
        sliverlight_xap_url: 'lib/plupload/plupload/Moxie.xap',
        filters: {
            mime_types: [
                //只容許上傳圖片文件 （注意，extensions中，逗號後面不要加空格）
                { title: "圖片文件", extensions: "jpg,gif,png,bmp" }
            ],
            max_file_size: '2097152'
        },
        init: {
            FilesAdded: function (up, files) {
                //顯示添加進來的文件信息
                plupload.each(files, function (file) {
                    console.log('文件名:' + file.name + '文件大小:' + plupload.formatSize(file.size));
                });
                // 文件添加以後，開始執行上傳
                uploader.start();
            },

            BeforeUpload: function (up, file) {
                set_upload_param(up, file.name, true);
            },

            UploadProgress: function (up, file) {
                // 顯示進度條
                editor.showUploadProgress(file.percent);
            },

            FileUploaded: function (up, file, info) {
                if (info.status == 200) {
                    var url = host + '/' + objectNname;
                    console.log('上傳成功 ', url);
                    // 插入到編輯器中
                    editor.command(null, 'insertHtml', '<img src="' + url + '?x-oss-process=style/img_800_x" style="max-width:100%;"/>');
                }
                else {
                    console.log('上傳失敗', info.response);
                }
            },

            Error: function (up, err) {
                alert('上傳失敗', err.response);
            },
            UploadComplete: function () {
                //隊列文件處理完畢後,處理相關的事情
                console.log('on UploadComplete');
                // 隱藏進度條
                editor.hideUploadProgress();
            }
        }
    });
    uploader.init();
}