『 原创 』 wangEditor3 之 利用百度图床上传图片

浮生半日梦。 前端技术 2018年11月24日 117 ℃ 0 9

    wangEditor3是我正在使用中的富文本编辑器,比较轻便简洁,当然也伴随着许多功能的没有。

    但这都不是事,二次开发会变得更加有趣。

什么是“图床”

    就在昨天之前,我还不知道“图床”为何物。是有一位朋友告之才知有此物。

    图床一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。

    图床就是专门用来存放图片,同时允许你把图片对外连接的网上空间,不少图床都是免费的。

    具体可以看看百度百科的释义,去了解更多。

为什么要用“图床”

    使用它的好处有几点:

  • 节省服务器空间。
  • 加速图片加载。
  • 减轻服务器带宽压力。
图床的缺点

    缺点也很明显:

  • 免费固然用的很爽,但却有很多限制。
  • 付费的也用的很爽,但需要付费。
到底用不用“图床”

    用 还是 不用 ?

    这不必纠结,自己开心就好,或者老板开心就好。

代码示例

    本篇使用的是百度图片当图床,比较简单粗暴,[至今不知道上传完图片之后在哪里可以管理上传的图片]。

let editor = new E('#editor')
//editor.customConfig.debug = true
//百度图床上传图片
editor.customConfig.customUploadImg = function(files, insert){
let file
for(file in files){
let formData = new FormData
formData.append('file', files[file])
$.ajax({
url : 'https://image.baidu.com/pcdutu/a_upload?fr=html5&target=pcSearchImage&needJson=true',
type : 'post',
data : formData,
processData: false,
contentType : false,
dataType : 'json',
success:function(res){
//console.log(res)
if(res.errno == 0){
let imgUrl = 'https://image.baidu.com/search/down?tn=download&url=' + res.url
insert(imgUrl)
}
}
})
}
}
editor.create()

    亲测可以,速度飞快。

最后

    个人感受:差不多就像 一些云存储,对象云存储,国内几大云计算供应商[阿里,腾讯,百度,华为等等]都有,常见的还有七牛云,又拍云等等。因为已经使用了又拍云的cdn加速服务,对这两者的感觉不是很大。

    这又引申出一个问题  “云存储” 和 "CDN" 的联系和区别。

云存储 和 CDN [借用知乎大佬的回答]

    作者:linyu

    链接:https://www.zhihu.com/question/23681437/answer/48640639

    来源:知乎

    云存储和CDN并不是谁取代谁的关系:

        CDN关注于把内容放在离用户近的地方,让用户访问得更快一点,它只是一层内容的缓存,不保证永远存在CDN的服务器上,有可能会被更热的内容替换出去,下次再有访问时,需要回源站取;
        而云存储是在线存储,关注于数据的安全性和可随时存取,它保证数据有多份copy,能让随时随地通过网络存取,虽然有的云存储有一定的CDN特性,比如会存在于几个IDC,但它做不到象CDN那样分布广泛。
        这两者可以互相结合,CDN是云存储的延伸和有益补充,它们没有替代关系,谢谢。


● 作者:浮生半日梦。
● 标题:wangEditor3 之 利用百度图床上传图片
● 链接:https://www.aroad.xyz/article/13.html
● 來源:记忆荟 ● 风
● 版权:转载无需联系作者,但请注明出处。

评论:(0)
₍₍◡( ╹◡╹ )◡₎₎ no more ~