Vue 百度UEditor富文本编辑器，又拍云上传图片

Z时代
2024-01-10
分类：综合

vue

vue项目地址

ueEditor

https://github.com/HaoChuan9421/vue-ueditor-wrap

定制开发

http://fex.baidu.com/ueditor/#dev-developer

ueditor.all.js

方法：

function dataURLtoFile(dataurl, filename) {//将base64转换为文件

var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

while(n--){

u8arr[n] = bstr.charCodeAt(n);

}

return new File([u8arr], filename, {type:mime});

}

修改又拍云上传

// plugins/simpleupload.js

/**

* @description

* 简单上传:点击按钮,直接选择文件上传。

* 原 UEditor 作者使用了 form 表单 + iframe 的方式上传

* 但由于同源策略的限制，父页面无法访问跨域的 iframe 内容

* 导致无法获取接口返回的数据，使得单图上传无法在跨域的情况下使用

* 这里改为普通的XHR上传，兼容到IE10+

* @author HaoChuan9421 <[email protected]>

* @date 2018-12-20

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

var me = this,

containerBtn,

timestrap = (+new Date()).toString(36);

function initUploadBtn() {

var w = containerBtn.offsetWidth || 20,

h = containerBtn.offsetHeight || 20,

btnStyle = 'display:block;width:' + w + 'px;height:' + h + 'px;overflow:hidden;border:0;margin:0;padding:0;position:absolute;top:0;left:0;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;cursor:pointer;';

var form = document.createElement('form');

var input = document.createElement('input');

form.id = 'edui_form_' + timestrap;

form.enctype = 'multipart/form-data';

form.style = btnStyle;

input.id = 'edui_input_' + timestrap;

input.type = 'file'

input.accept = 'image/*';

input.name = me.options.imageFieldName;

input.style = btnStyle;

form.appendChild(input);

containerBtn.appendChild(form);

input.addEventListener('change', function(event) {

if (!input.value) return;

var file=this.files[0];

if(window.FileReader){

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onloadend = function (e) {

var loadingId = 'loading_' + (+new Date()).toString(36);

var imageActionUrl = me.getActionUrl(me.getOpt('imageActionName'));

var params = utils.serializeParam(me.queryCommandValue('serverparam')) || '';

var action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?' : '&') + params);

var allowFiles = me.getOpt('imageAllowFiles');

me.focus();

me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme + '/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');

function showErrorLoader(title) {

if (loadingId) {

var loader = me.document.getElementById(loadingId);

loader && domUtils.remove(loader);

me.fireEvent('showmessage', {

'id': loadingId,

'content': title,

'type': 'error',

'timeout': 4000

});

}

//2020年05月21日10:35:43

/* 判断后端配置是否没有加载成功 */

// if (!me.getOpt('imageActionName')) {

// showErrorLoader(me.getLang('autoupload.errorLoadConfig'));

// return;

// }

// 判断文件格式是否错误

var filename = input.value,

fileext = filename ? filename.substr(filename.lastIndexOf('.')) : '';

if (!fileext || (allowFiles && (allowFiles.join('') + '.').indexOf(fileext.toLowerCase() + '.') == -1)) {

showErrorLoader(me.getLang('simpleupload.exceedTypeError'));

return;

}

var xhr = new XMLHttpRequest()

xhr.open('post', action, true)

if (me.options.headers && Object.prototype.toString.apply(me.options.headers) === "[object Object]") {

for (var key in me.options.headers) {

xhr.setRequestHeader(key, me.options.headers[key])

}

var options = {};

options.bucket = upyunConfig.bucket

options['save-key'] = upyunConfig['save-key']

options.expiration = Math.floor(new Date().getTime() / 1000) + 86400

const policy = window.btoa(JSON.stringify(options))

const signature = md5(policy + '&' + upyunConfig.apiSecret)

const data = new FormData();

data.append("policy", policy);

data.append("signature", signature);

var blob = dataURLtoFile(e.target.result,file.name);

data.append("file", blob);

xhr.onload = function() {

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

var res = JSON.parse(xhr.responseText)

// var link = me.options.imageUrlPrefix + res.url;

var link = "http:"+upyunConfig.domain+res.url;

if (res.url) {

loader = me.document.getElementById(loadingId);

loader.setAttribute('src', link);

loader.setAttribute('_src', link);

loader.setAttribute('title', res.title || '');

loader.setAttribute('alt', res.original || '');

loader.removeAttribute('id');

domUtils.removeClasses(loader, 'loadingclass');

me.fireEvent("contentchange");

} else {

showErrorLoader(res.state);

}

} else {

showErrorLoader(me.getLang('simpleupload.loadError'));

}

};

xhr.onerror = function() {

showErrorLoader(me.getLang('simpleupload.loadError'));

};

xhr.send(data);

form.reset();

};

}

})

}

return {

bindEvents: {

'ready': function() {

//设置loading的样式

utils.cssRule('loading',

'.loadingclass{display:inline-block;cursor:default;background: url(\'' +

this.options.themePath +

this.options.theme + '/images/loading.gif\') no-repeat center center transparent;border:1px solid #cccccc;margin-right:1px;height: 22px;width: 22px;}\n' +

'.loaderrorclass{display:inline-block;cursor:default;background: url(\'' +

this.options.themePath +

this.options.theme + '/images/loaderror.png\') no-repeat center center transparent;border:1px solid #cccccc;margin-right:1px;height: 22px;width: 22px;' +

'}',

this.document);

/* 初始化简单上传按钮 */

'simpleuploadbtnready': function(type, container) {

containerBtn = container;

me.afterConfigReady(initUploadBtn);

}

outputRule: function(root) {

utils.each(root.getNodesByTagName('img'), function(n) {

if (/\b(loaderrorclass)|(bloaderrorclass)\b/.test(n.getAttr('class'))) {

n.parentNode.removeChild(n);

}