阿里云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="/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-'; // 你阿里云的blockname和地区请对应更改var objectNname = ' ';var policyText = {"expiration": "-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;// 编辑器中，触发选择图片的按钮的idvar btnId = editor.customUploadBtnId;// 编辑器中，触发选择图片的按钮的父元素的idvar containerId = editor.customUploadContainerId;//实例化一个上传对象var uploader = new plupload.Uploader({browse_button: btnId, // 选择文件的按钮的idurl: '', // 服务器端的上传地址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);// 插入到编辑器中mand(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();}