ue富文本图片上传自带的那个比较简单，直接找到ue的配置文件ueditor.config.js，在这个文件中有一行代码是：
serverUrl: URL + "jsp/controller.jsp"
把这个改成自己的服务器地址就行了，要是做了本地代理的话就直接改成你代理的名字就ok。
不过在这 我要说的是不用他默认的图片上传而是自定义一个按钮 用自己的上传图片的方法。
首先要用自己的图片上传就得先自定义一个上传图片得按钮
1，找到ue得配置文件ueditor.config.js，
在这个中找到toolbars这个数组，（这个也就是ue得按钮配置数组，想要哪些功能直接在这写就ok了）
2，在这个数组中添加一个你自己想要自定义按钮的名字，我的项目中我自定义了一个addimg
toolbars:['addimg']
3,再在这个文件中找到labelMap，这个是用于鼠标移上按钮时的提示。
labelMap:{
'addimg':'添加图片'
}
4，再找到ueditor.all.js文件，找到btnCmds数组这这个数组中添加上你要自定义按钮的名字和toolbars一样
btnCmds = ['addimg']
这个时候刷新页面就可以在help按钮后面新增了一个按钮，但是按钮的图标显示的是B
5,在显示出来按钮后，我们发现按钮的图标不是我们想要的，然后我们找到themes文件夹下的default文件夹下的css文件夹下的ueditor.css,在文件的末尾加上如下css：
.edui-for-showmsg .edui-icon{
background-position:-200px -40px;
}
这时候再刷新页面就发现图标已经换掉了，这里要解释下就是图标都是使用themes/default/images/icons.png这个图片文件通过偏移量来选择图标的，如果有自定义图标，只需要将制作好的图标加入到icons.png中，然后设置偏移量就可以了。
6，当我们点击按钮时发现没有反应，其实在第4步完成后ueditor已经为我们将这个按钮的点击事件绑定好了，只不过是这个点击方法是空的而已，现在就需要我们自己去重写这个点击方法了。首先在ueditor.all.js文件的最后直接写就行,例如：
UE.commands['addimg'] = {
execCommand : function(){
alert(1111)
return true;
},
queryCommandState:function(){
}
};
这样，一个自定义按钮就写好了。
把按钮设置好了，下来就是plupload 的处理了
在这，plupload 处理就类似之前写的plupload 上传一样，
let accessid = '阿里oss申请的accessid'
let accesskey = '阿里oss申请的accesskey'
let host = '阿里oss的存储文件地址'
let bucket = 'image'
let g_dirname = ''
let g_object_name = ''
let g_object_name_type = ''
var timestamp
let now = timestamp = Date.parse(new Date())/ 1000
let pos = ''
let suffix = ''
var policyText = {
'expiration': '2020-01-01T12:00:00.000Z',// 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
'conditions': [
['content-length-range',0,1048576000]// 设置上传文件的大小限制
]
}
var policyBase64 = Base64.encode(JSON.stringify(policyText))
let message = policyBase64
var bytes = Crypto.HMAC(Crypto.SHA1,message,accesskey, {asBytes: true})
var signature = Crypto.util.bytesToBase64(bytes)
// 选择上传名字是本地文件名字还是随机文件名字
function check_object_radio () {
g_object_name_type = 'random_name'
}
// 默认是上传到根目录
function get_dirname () {
g_dirname = 'image/'
}
// 获得随机的字符串
function random_string (len) {
len = len || 32
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
var maxPos = chars.length
var pwd = ''
for (var 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) {
if (g_object_name_type === 'local_name') {
g_object_name += filename
}else if (g_object_name_type === 'random_name') {
suffix = get_suffix(filename)
g_object_name = random_string(10)+ new Date().getTime()+ suffix
// g_object_name = filename
}
return ''
}
function get_uploaded_object_name (filename) {
if (g_object_name_type === 'local_name') {
var tmp_name = g_object_name
tmp_name = tmp_name.replace(filename,filename)
return tmp_name
}else if (g_object_name_type === 'random_name') {
return g_object_name
}
}
// 设置上传参数
function set_upload_param (up,filename,ret) {
// g_object_name = g_dirname
if (filename !== '') {
suffix = get_suffix(filename)
calculate_object_name(filename)
}
let new_multipart_params = {
'Filename': g_dirname + g_object_name,
'key': g_dirname + g_object_name,
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status': '200',// 让服务端返回200,不然，默认会返回204
'signature': signature
}
console.log(g_object_name)
up.setOption({
'url': host,
'multipart_params': new_multipart_params
})
up.start()
}
export default {
name: 'AddNotice',
components: {
},
data () {
return {
editor: null,
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
watch: {},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
computed: {
},
created () {
},
mounted () {
var that = this
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
that .editor.setContent(that .defaultMsg); // 确保UE加载完成后，放入内容。
document.querySelector('.edui-for-addimg').onclick=function(){
document.querySelector('#selectfiles').click()
}
});
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'selectfiles',
multi_selection: true,
// container: document.getElementById('container'),
flash_swf_url: './../assets/plupload-2.1.2/js/Moxie.swf',
silverlight_xap_url: './../assets/plupload-2.1.2/js/Moxie.xap',
url: host,
init: {
PostInit: function () {
console.log(7777)
},
QueueChanged: function (up) {// 数组变化是发生
console.log(up)
},
FileFiltered: function (up,files) {
var fileSize = (Math.round(files.size * 100 / (1024 * 1024))/ 100).toString()// MB
if (fileSize > 10) {
uploader.removeFile(files)
}
},
// 图片成功添加到上传队列中后的事件
FilesAdded: function (up,files) {
console.log(111)
plupload.each(files,function (v,i) {
})
console.log(files)
set_upload_param(uploader,'',false)
},
BeforeUpload: function (up,file) {
console.log(3333)
check_object_radio()
get_dirname()
set_upload_param(up,file.name,true)
},
UploadProgress: function (up,file) {
console.log(file.percent)// 进度条设置
},
FileUploaded: function (up,file,info) {
if (info.status === 200) {
let url = host+'/'+g_dirname+get_uploaded_object_name(file.name)
that.editor.execCommand( 'insertimage', {
src:url,
// width:'100',
// height:'100'
} );
} else {
this.$message.error('图片插入失败')
}
},
Error: function (up,err) {
// document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response))
}
}
})
uploader.init()
},
destroyed () {
}
}
大功告成
