ueditor 前端直傳OSS

第一步
從後端獲取 簽名 參照https://help.aliyun.com/document_detail/31926.html

格式如下

第二步
  修改單文件上傳部分

打開 ueditor.all.js 定位到大概24579行,

屏蔽掉如下代碼

domUtils.on(iframe, 'load', callback);
form.action = utils.formatUrl(imageActionUrl + (imageActionUrl.indexOf('?') == -1 ? '?':'&') + params);
form.submit();

添加如下代碼：

$.get("修改爲獲取後端簽名地址",{},function(ret){
 
var sign = JSON.parse(ret);
var form = new FormData();
var object_name = "文件名";
// 添加簽名信息
form.append('OSSAccessKeyId', sign['accessid']);
form.append('policy', sign['policy']);
form.append('Signature', sign['signature']);
form.append('key', object_name);
// 添加文件
form.append('file', 文件對象);
$.ajax({
url: sign['host'],
data: form,
processData: false,
contentType: false,
type: 'POST'
}).done(function (ret) {
var link = sign['host'] + "/" + object_name;
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', '');
loader.setAttribute('alt', '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
});
});

到此編輯器的單文件即可直傳入OSS

第三步
修改圖片拖拽/粘貼上傳

定位文件到23818行

屏蔽如下代碼

           

var xhr = new XMLHttpRequest(),
fd = new FormData(),
params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
fd.append(fieldName, file, file.name || ('blob.' + file.type.substr('image/'.length)));
fd.append('type', 'ajax');
xhr.open("post", url, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.addEventListener('load', function (e) {
try{
var json = (new Function("return " + utils.trim(e.target.response)))();
if (json.state == 'SUCCESS' && json.url) {
successHandler(json);
} else {
errorHandler(json.state);
}
}catch(er){
errorHandler(me.getLang('autoupload.loadError'));
}
});
xhr.send(fd);

添加如下代碼  

var xhr = new XMLHttpRequest(),
xhrSign = new XMLHttpRequest(),
fd = new FormData();
xhrSign.open("post","修改爲獲取後端簽名地址",true);
xhrSign.addEventListener('load', function (e) {
try{
var sign = JSON.parse(e.target.response);
var ext = 文件後綴;
var object_name = 文件名稱 + 文件後綴;
fd.append('OSSAccessKeyId', sign['accessid']);
fd.append('policy', sign['policy']);
fd.append('Signature', sign['signature']);
fd.append('key', object_name);
// 添加文件
fd.append('file', file);
xhr.open("post", sign['host'], true);
xhr.addEventListener('load', function (e) {
var url = sign['host'] + "/" + object_name;
successHandler({
"state": "SUCCESS",
"url": url,
"title": file.name,
"original": file.name,
"type": ext,
"size": file['size']
});
});
xhr.send(fd);
}catch(er){
errorHandler(me.getLang('autoupload.loadError'));
}
});
xhrSign.send();

到此編輯器拖拽/粘貼上傳即可直傳入OSS

第四步
修改多文件上傳

打開文件 dialogs/image/image.js

添加全局變量 OssSign

定位到大約744行，將$upload的clike函數修改爲如下

start = function () {
if (state === 'ready') {
uploader.upload();
} else if (state === 'paused') {
uploader.upload();
} else if (state === 'uploading') {
uploader.stop();
}
};
$upload.on('click', function () {
if ($(this).hasClass('disabled')) {
return false;
}
if (!OssSign) {
$.get("修改爲獲取後端簽名地址", {}, function (sign) {
OssSign = JSON.parse(sign);
uploader['options']['server'] = OssSign['host'];
start();
});
} else {
start();
}
});

找到如下代碼

uploader.on('uploadBeforeSend', function (file, data, header) {
//這裏可以通過data對象添加POST參數
header['X_Requested_With'] = 'XMLHttpRequest';
});

修改爲：

uploader.on('uploadBeforeSend', function (file, data, header) {
var object_name = "文件名稱";
data = $.extend(data, {
'OSSAccessKeyId': OssSign['accessid'],
'policy': OssSign['policy'],
'Signature': OssSign['signature'],
'key': object_name
});
file.path = object_name;
});

找到如下代碼 

uploader.on('all', function (type, files) {
switch (type) {
case 'uploadFinished':
setState('confirm', files);
break;
case 'startUpload':
/* 添加額外的GET參數 */
var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);
uploader.option('server', url);
setState('uploading', files);
break;
case 'stopUpload':
setState('paused', files);
break;
}
});

修改爲：

            

uploader.on('all', function (type, files) {
switch (type) {
case 'uploadFinished':
setState('confirm', files);
break;
case 'startUpload':
/* 添加額外的GET參數 */
// var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '',
// url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);
uploader.option('server', OssSign['host']);
setState('uploading', files);
break;
case 'stopUpload':
setState('paused', files);
break;
}
});

最後進行如下修改

到此對文件直傳OSS已經完成。

若有問題，可稍微調整即可。

其他部分上傳，參照此處即可。
--------------------- 
作者：BMaru 
來源：CSDN 
原文：https://blog.csdn.net/u013684276/article/details/80143343 
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！