上传文件到自己建的服务器,summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）...

1.上传图片至自己的服务器(这个官方都有例子，重点介绍附件上传)

图片上传官方网址

// onChange callback

$('#summernote').summernote({

callbacks: {

onChange: function(contents, $editable) {

console.log('onChange:', contents, $editable);

}

}

});

// summernote.change

$('#summernote').on('summernote.change', function(we, contents, $editable) {

console.log('summernote\'s content is changed.');

})

summernote是一款富文本编辑器，但是他上传的图片的时候，图片会以二进制的形式存入数据库字段中，这时候就很占资源，所以我们希望图片能存入自己的服务器，在字段中就以链接地址的形式存放，这时候就需要在上传图片的时候进行处理，所以callbacks下面的onImageUpload进行图片文件的处理。

示例：

//初始化定义

var _this=this;

this.curEle=$('#'+this.id);

var fileUploadBtn=this.template;

this.curEle.summernote({

focus: true,

lang:'zh-CN', //中文说明配置

placeholder:'请输入内容',

fontNames: ['宋体','微软雅黑','楷体','黑体','隶书', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',

'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',

'Tahoma', 'Times New Roman', 'Verdana'],

height:400,

minHeight:300,

maxHeight:null,

toolbar: [

['style', ['style']],

['font', ['bold', 'italic', 'underline', 'clear']],

['fontname', ['fontname']],

['color', ['color']],

['para', ['ul', 'ol', 'paragraph','height']],

['table', ['table']],

['insert', ['fileBtn','media', 'link', 'picture', 'video']],

['view', ['fullscreen']]

],

buttons: {

fileBtn: fileUploadBtn

},

callbacks: {

onImageUpload: function (files,editor, $editable) {

_this.sendFile(files[0]);

}，

}

})

methods:{

sendFile(files){

var _this=this;

var data = new FormData();

data.append("file", files);

$.ajax({

data : data,

type : "POST",

url : SERVICE_URLS.commonUrl.uploadPic.path, //此处为图片上传服务器请求地址，返回的是图片上传后的路径(例如：请求接口为http://120.96.35.20:8090/uploadPic)

cache : false,

contentType : false,

processData : false,

dataType : "json",

success: function(data) {//举例data:{data:'http://www.test.com/a.jpg'}

_this.curEle.summernote('insertImage', data.data);

},

error:function(){

alert("上传失败");

}

});

},

template(context){ //此处为自定义附件上传按钮，如果只考虑图片上传请忽略

let _this=this;

var ui = $.summernote.ui;

// create button

var button = ui.button({

contents: ' 附件',

tooltip: '文件上传',

click: function () {

_this.visibleUpload=true; //控制上传文件界面框可见性

setTimeout(function(){

_this.initUploader(); //初始化web uploader插件

},0)

}

});

return button.render(); // return button as jquery object

}

}

2.自定义创建附件按钮，上传至自己服务器。

首先介绍github上已经存在的附件插件

uploadcare-summernotegithub链接地址

这是Summernote WYSIWYG编辑器的Uploadcare插件。它允许您的用户从本地设备，社交网络，云存储上传文件和图像，而无需处理上传所需的任何后端代码。这句话意味着你上传的文件存储的位置不在你自己的服务器上。

当然插件提供了定制存储，有兴趣的可以自己尝试。综合考虑插件的方法有点繁琐不安全，不如自己写个附件上传按钮。

示例如下

(1)创建自己的附件上传按钮 自定义按钮, 如上template函数所示：

(2)上传附件，此处用百度的web uploader插件，具体代码不在细讲(可看web uploader API)

(3)根据返回的数据，动态创建DOM插入到summerNote编辑器中。

这里重点说一下思路：

1.利用插件将本地文件上传到我们的服务器

2.当上传完成后(uploadFinished)，我们可根据成功返回的数据,动态的创建DOM对象。

3.将创建好的DOM对象，再插入到编辑器中

(注意：这里不用insertNode方法,因为他会额外的

initUploader(){

var _this=this;

var $list=$('#uploadList');

var state='pending';

var $btn=$('#toServerBtn');

var uploader = WebUploader.create({

swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',

server: SERVICE_URLS.commonUrl.uploadFile.path, //自己服务器的文件上传接口

pick: '#fileUpload',

resize: false,

fileNumLimit: 10,

fileSizeLimit: 10 * 1024 * 1024,

});

this.uploader=uploader;

// 当有文件被添加进队列的时候

uploader.on( 'fileQueued', function( file ) {

$list.append( '

' +

'

' + file.name + '

' +

'

' +

'

等待上传

' +

'

取消上传

' +

'

'+

'

' +

'

'

'+

'

' );

if(file){

_this.ifFileQueue=true;

}

});

$list.on('click','.stateBox .cancelFile',function(event){

var target=event.target.getAttribute('attr');

uploader.removeFile( target,true );

$('#'+target).remove();

var status=uploader.getStats();

if(status.queueNum==0){

_this.ifFileQueue=false

}else{

_this.ifFileQueue=true;

}

})

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id ),

$percent = $li.find('.progress .progress-bar');

// 避免重复创建

if ( !$percent.length ) {

$percent = $('

' +

'

' +

'

' +

'

').appendTo( $li ).find('.progress-bar');

}

$li.find('p.uploadState').text('上传中');

$percent.css( 'width', percentage * 100 + '%' );

});

uploader.on( 'uploadSuccess', function( file,response ) {

$( '#'+file.id ).find('p.uploadState').text('已上传');

_this.$set( _this.fileList,_this.fileList.length,response.result[0])

});

uploader.on( 'uploadError', function( file ) {

$( '#'+file.id ).find('p.uploadState').text('上传出错');

});

uploader.on( 'uploadComplete', function( file ) {

$( '#'+file.id ).find('.progress').fadeOut();

});

uploader.on('uploadFinished',function(){ //重点在这里

var str=``;

for (var i = 0; i < _this.fileList.length; i++) {

var item = _this.fileList[i];

str+=`

${item.fileName}

`;

}

var storageCode=_this.curEle.summernote('code');

_this.curEle.summernote('reset');

var node=$("

"+storageCode+str+"

")[0];

// _this.curEle.summernote('insertNode',node); //此处不用insertNode

_this.curEle.summernote('code',node);

setTimeout(()=>{

_this.visibleUpload=false;

},1000)

});

uploader.on( 'all', function( type ) {

if ( type === 'startUpload' ) {

state = 'uploading';

} else if ( type === 'stopUpload' ) {

state = 'paused';

} else if ( type === 'uploadFinished' ) {

state = 'done';

}

if ( state === 'uploading' ) {

$btn.text('暂停上传');

} else {

$btn.text('开始上传');

}

});

$btn.on( 'click', function() {

if ( state === 'uploading' ) {

uploader.stop();

} else {

uploader.upload();

}

});

},

代码没有写全，只是提供思路。