之前文章有写过laravel上传图片到oss, 原理一样
首先下载php后台qian签名js直传
https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11186623.6.637.347d69cb1fZPTG
目录拷贝以及qi签名可以查看之前的文章,主要记录下wangeditorshan上传
首先拷贝一份upload.js命名为wangeditor.js
然后加入wangeditor
var E = window.wangEditor
var editor = new E('#content')
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgHeaders = {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
//editor.customConfig.uploadImgServer = '/backend/updetails'
//editor.customConfig.uploadFileName = 'wangpic[]'
//editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
editor.customConfig.onchange = function (html) {
$('.wangeditor_value').val(html)
};
editor.create();
修改upload
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : editor.imgMenuId,
multi_selection: true,
auto_start: true,
flash_swf_url : '../plupload/js/Moxie.swf',
silverlight_xap_url : '../plupload/js/Moxie.xap',
url : 'http://oss.aliyuncs.com',
filters: {
mime_types : [ //只允许上传图片和zip,rar文件
{ title : "Image files", extensions : "jpg,gif,png,bmp" },
{ title : "video files", extensions : "mp4,3gp" }
],
max_file_size : '10mb', //最大只能上传10mb的文件
prevent_duplicates : false //不允许选取重复文件
},
init: {
PostInit: function() {
set_upload_param(uploader, '', false);
return false;
},
BeforeUpload: function(up, file) {
set_upload_param(up, file.name, true);
},
FilesAdded: function(up) {
up.start(); //选择完后直接上传
},
FileUploaded: function(up, file, info) {
if (info.status == 200)
{
editor.cmd.do('insertHtml', '<img src="' + host + g_object_name + '" style="width: auto; max-width:100%;"/>');
console.log(g_object_name);
}
else
{
alter(info.response);
}
},
Error: function(up, err) {
if (err.code == -600) {
alter("\n选择的文件太大了,可以根据应用情况,在upload.js 设置一下上传的最大大小");
}
else if (err.code == -601) {
alter("\n选择的文件后缀不对,可以根据应用情况,在upload.js进行设置可允许的上传文件类型");
}
else if (err.code == -602) {
alter("\n这个文件已经上传过一遍了");
}
else
{
alter("\nError xml:" + err.response);
}
}
}
});
使用upload
editor.config.customUploadInit = uploader.init();
最终的upload.js如下
accessid = ''
accesskey = ''
host = ''
policyBase64 = ''
signature = ''
callbackbody = ''
filename = ''
key = ''
expire = 0
g_object_name = ''
g_object_name_type = 'random_name'
now = timestamp = Date.parse(new Date()) / 1000;
details_dir = 'details'
currentUrl = window.location.href;
backendIndex = currentUrl.indexOf('backend');
baseBackend = currentUrl.substr(0, backendIndex);
var E = window.wangEditor
var editor = new E('#content')
editor.customConfig.zIndex = 0
editor.customConfig.uploadImgHeaders = {
'X-CSRF-TOKEN': $('input[name="_token"]').val()
}
//editor.customConfig.uploadImgServer = '/backend/updetails'
//editor.customConfig.uploadFileName = 'wangpic[]'
//editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
editor.customConfig.onchange = function (html) {
$('.wangeditor_value').val(html)
};
editor.create();
function send_request()
{
var xmlhttp = null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
serverUrl = baseBackend + 'backend/getoss/' + details_dir
xmlhttp.open( "GET", serverUrl, false );
xmlhttp.send( null );
return xmlhttp.responseText
}
else
{
alert("Your browser does not support XMLHTTP.");
}
};
function get_signature()
{
//可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
now = timestamp = Date.parse(new Date()) / 1000;
if (expire < now + 3)
{
body = send_request()
var obj = eval ("(" + body + ")")
host = obj['host']
policyBase64 = obj['policy']
accessid = obj['accessid']
signature = obj['signature']
expire = parseInt(obj['expire'])
callbackbody = obj['callback']
key = obj['dir']
return true;
}
return false;
};
function random_string(len) {
len = len || 32;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
function get_suffix(filename) {
pos = filename.lastIndexOf('.')
suffix = ''
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
}
function calculate_object_name(filename)
{
suffix = get_suffix(filename)
g_object_name = key + random_string(20) + suffix
return ''
}
function set_upload_param(up, filename, ret)
{
if (ret == false)
{
ret = get_signature()
}
g_object_name = key;
if (filename != '') {
suffix = get_suffix(filename)
calculate_object_name(filename)
}
new_multipart_params = {
'key' : g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status' : '200', //让服务端返回200,不然,默认会返回204
'callback' : callbackbody,
'signature': signature,
};
up.setOption({
'url': host,
'multipart_params': new_multipart_params
});
up.start();
}
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : editor.imgMenuId,
multi_selection: true,
auto_start: true,
flash_swf_url : '../plupload/js/Moxie.swf',
silverlight_xap_url : '../plupload/js/Moxie.xap',
url : 'http://oss.aliyuncs.com',
filters: {
mime_types : [ //只允许上传图片和zip,rar文件
{ title : "Image files", extensions : "jpg,jpeg,gif,png,bmp" },
{ title : "video files", extensions : "mp4,3gp" }
],
max_file_size : '10mb', //最大只能上传10mb的文件
prevent_duplicates : false //不允许选取重复文件
},
init: {
PostInit: function() {
set_upload_param(uploader, '', false);
return false;
},
BeforeUpload: function(up, file) {
set_upload_param(up, file.name, true);
},
FilesAdded: function(up) {
up.start(); //选择完后直接上传
},
FileUploaded: function(up, file, info) {
if (info.status == 200)
{
var file_type = file.type;
var is_image = file_type.indexOf('image');
var is_video = file_type.indexOf('video');
if(is_image > -1) {
editor.cmd.do('insertHtml', '<img src="' + host + g_object_name + '" style="width: auto; max-width:100%;"/>');
}
if(is_video > -1) {
editor.cmd.do('insertHtml', '<video controls src="' + host + g_object_name + '" style="width: auto; max-width:100%;"></video>');
}
}
else
{
alter(info.response);
}
},
Error: function(up, err) {
if (err.code == -600) {
alter("\n选择的文件太大了,可以根据应用情况,在upload.js 设置一下上传的最大大小");
}
else if (err.code == -601) {
alter("\n选择的文件后缀不对,可以根据应用情况,在upload.js进行设置可允许的上传文件类型");
}
else if (err.code == -602) {
alter("\n这个文件已经上传过一遍了");
}
else
{
alter("\nError xml:" + err.response);
}
}
}
});
// uploader.init();
editor.config.customUploadInit = uploader.init();