阿里云加Picgo或MPic搭建最豪横的图床

2019/04/10 10:10
阅读数 31

<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; padding: 0 10px; word-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; margin-top: -10px; line-height: 1.75; color: #595959; font-family: Optima-Regular, Optima, PingFangTC-Light, PingFangSC-light, PingFangTC-light; letter-spacing: 2px; background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%); background-size: 20px 20px; background-position: center center;"><h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 25px;"><span class="prefix" style="display: none;"></span><span class="content" style="display: inline-block; font-weight: bold; color: #595959;">阿里云加Picgo或MPic搭建最豪横的图床</span><span class="suffix"></span></h1> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">首先解释一下什么是图床,图床其实就是提供图片存储的服务器。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">对于自建博客来说,由于各种原因的限制(比如穷。。。)可能无法购买存储空间比较大的VPS。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">而对于markdown来说,因为markdown源文件是纯文本的。 所以无法存储图片类的多媒体文件。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">当然像印象笔记等是支持本地图片存储的,这个就另说了。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">所以为了解决文章中图片存储的问题,我们可以考虑使用图床的方式,将图片保存在存储服务器上,而在我们的文章中引用图片链接就可以了。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">使用图床的优点:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">方便,简洁</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">markdown源文件“可移植性”更好</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">选择优质的图床可以加快文章的加载速度</section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">当然使用图床也有一定的风险和缺点:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">图片不是保存在本地,万一图床服务器挂了,所有图片都无法正常显示</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">速度慢的图床可能会导致图片加载缓慢甚至加载异常</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">微信公众号对图床的支持存在一些诡异的问题</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">公共图床的图片存在被泄露的风险,不建议在公共图床中上传涉及个人隐私及商业机密的图片</section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">相信如果大家看过某新晋作者的公众号<strong style="color: #595959; font-weight: bold;"><span>「</span>吾码2016<span>」</span></strong>的文章的话,应该会发现,某些时候,文章内的图片好像出了一些问题。虽然无伤大雅,但是作为一个自我要求极其严格的作者,该公众号作者正在想尽一切办法解决这个问题。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">所以是使用图床,还是手工排版图片,这个需要大家仔细斟酌。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">如果你选择使用图床的话,那么就请继续往下看。 如果你出于安全考虑,选择手工图片排版,那么请点击左上角的叉叉,然后继续阅读下一篇文章《比海飞丝还顺滑的写作体验---幕布+typora》</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">图床的选择</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">目前网络上开放的公共图床很多我曾经用过的有一下几个:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://sm.ms/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">sm.ms</a></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://www.superbed.cn/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">聚合图床</a></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://imgur.com/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">imgur</a></section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://imgkr.com/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">图壳图床</a></section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里着重说一下图壳,上一篇文章中介绍的公众号编辑神器markdown nice编辑器默认支持的就是图壳图床。 可以直接将图片粘贴到编辑器中,编辑器会自动上传到图壳。所以要说推荐的话,出于对markdown nice 作者大神的崇拜,我推荐图壳。并且表示不接受反驳。。。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">当然,如果对于公共图床不够放心或者使用上不够顺手的话,这里介绍两个自建图床的方法:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">使用Github搭建自己的图床,具体方法请点击上方的叉叉,在历史文章中找到《好记性不如烂笔头-打造隔热知识库》一文,在该文最后有介绍具体操作教程</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">斥巨资购买阿里云OSS服务搭建个人图床</section></li></ul> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">好,作为一个至今仍然无法靠写作赚到一毛钱但仍然嘴硬表示<strong style="color: #595959; font-weight: bold;"><span>「</span>自己并不差钱<span>」</span></strong>的作者,这里就教大家如何使用阿里云OSS存储服务搭建个人图床。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">阿里云OSS搭建个人图床</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里要说明一下为什么选择阿里云。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">因为我喜欢...你管我...</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">当然如果你不喜欢阿里云的话,可以选择腾讯云。但是千万不要选择百度云,没有为什么,看百度不爽而已...</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step1.首先打开阿里云主页:https://cn.aliyun.com/</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318233232.png" alt="阿里云主页" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">阿里云主页</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">一股熟悉的气息铺面而来,不知道是阿里的UI偷懒还是为了让云计算服务更加亲民化,为什么主页设计的跟你家淘宝一个德行...</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">点击右上角的登录按钮(是的,绝大部分人不需要注册,因为即使没有淘宝账号,你也会有支付宝账号的。。。)</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">然后选择支付宝快捷登录或者直接使用淘宝账号登录就可以了。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step2.跳转回主页之后点击右上角的控制台,一次选择左上角的菜单,对象存储OSS</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318233804.png" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step3.点击Bucket列表---创建Bucket</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318234005.png" alt="创建Bucket" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">创建Bucket</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step4.按照下图进行配置:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">Bucket名称:全局唯一标识</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">区域:看着选,有很多地方。因为考虑到未来的我的目标读者可能会遍布大江南北,所以我选择的算是比较靠近中部的杭州。</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">存储类型:标准存储就可以了</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">同城冗余:关闭,当然如果你资金充裕的话,可以考虑打开。这样的话你的存储会启用灾备,即使某个区域的服务器挂掉了,其他区域依旧可以提供服务</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">读写权限:这里要注意,一定是公共读!不然外网访问不了图片。。。</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">加密,日志,备份:通通关闭,原因只有一个字:穷!</section></li></ul> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200318234421.png" alt="。。。" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">。。。</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">点击确定之后,很快就可以进入到我们刚刚创建好的Bucket了</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">现在到了最肉疼的时候了,那就是去付费购买存储包。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">购买存储包并充值</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">点击资源包管理-购买资源包</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319000656.png" alt="购买资源包" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">购买资源包</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">然后按照下图进行选择,具体我就不解释了,详细解释的话太复杂,时间的话建议一年起购,当然时间越久越便宜</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319000851.png" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里可以看到,1年40G的标准存储要耗费七块两毛钱的巨额资金!!!</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这样的大手笔,你怕了吗?</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里要说一下,存储包指的是我们购买的阿里云OSS的存储空间。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">下行流量指的是,外网请求我们图片的时候所消耗的流量。 这两个是分开计费的。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">本来还打算买个流量包,但是看了一眼价格...再想到我的博客和公众号可怜的访问量...我觉得我可能用不上...</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">但是在我的使用了将近一个月之后的某一天,我突然收到这么一条短信,吓得我赶紧斥巨资给阿里云交钱。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/4b2ffa878b71c970f5752dae894f84b.jpg" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">好,上面说的可能有点夸张。根据我这一个多月的使用情况来看,关于费用方面我总结了以下几点:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">存储包是必须要购买的。40G对于图片存储是足够用的。一年7块两毛钱不算贵</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">流量的计费会根据图片请求次数和请求流量来计费,一般个人使用不需要太过担心</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;">在访问流量不大的情况下,几乎可以忽略不计,我充值了10块钱,到目前为止只用了两毛七</section></li></ul> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">用户和权限配置</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step1.在对象存储-概览这里,右上方,有快捷入口,选择访问控制RAM</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319105005.png" alt="访问控制RAM" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">访问控制RAM</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step2.选择用户-新建用户</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319105133.png" alt="新建用户" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">新建用户</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step3.依次填写登录名称,显示名称。这里需要注意的是一定要勾选编程访问!!!</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319105236.png" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step4.用户创建成功之后一定要妥善保存AccessKeyID和AccessKeySecret</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319105804.png" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step5.保存好这两个值之后,返回用户列表,选择添加权限</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319105904.png" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step6.这里我们选择AliyunOSSFullAccess</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319110004.png" alt style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">好了,阿里云的配置至此完成。</p> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">相关工具的配置和使用</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">上面我们配置好了图床,但是如果每次都通过后台上传的话,非常的不方便。 这里推荐两个图床工具:</p> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="http://mpic.lzhaofu.cn/" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">MPic</a>:界面比较简单,但是上传速度很快</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://github.com/Molunerfinn/PicGo" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">PicGo</a>:支持的图床多,可以自定义插件,开发团队解决bug的速度很快</section></li></ul> <h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; color: black; font-size: 16px; font-weight: bold; text-align: center;"><span class="prefix" style="display: none;"></span><span class="content" style="border-bottom: 2px solid #DEC6FB; color: #595959;">MPic的配置和使用</span><span class="suffix" style="display: none;"></span></h3> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">MPic是绿色版软件,不需要安装,下载解压后可以直接运行。 软件体积很小,上传速度相当快,而且会自动根据日期建立文件夹分类。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">但是有个缺点就是MPic会一直检测剪贴板,而且是自动上传。 所以只要截了图它就会biu~的一下以迅雷不及掩耳盗铃响叮当仁不让之势给你上传上去。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">建议作者加个快捷键会更好一点。让用户需要上传的时候再上传。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step1.在主面板-设置账号</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="http://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319/113520939.png" alt="设置账号" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">设置账号</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step2.填写以下相关信息:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="http://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319/113441449.png" alt="mark" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">mark</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Endpoint信息可以在阿里云控制台,概览页面中看到:</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="http://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319/114120527.png" alt="Endpoint信息" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">Endpoint信息</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">AccessKeyID和AccessKeySecret就是前面要求大家保存的内容。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Bucket是我们创建的Bucket名程。最后一个空,大家可以理解为需要上传到的文件夹。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">配置好之后,我们正常截图或者复制附图片到剪贴板,MPic就会自动上传,返回的结果是图片的Markdown格式的链接,可以直接插入到Markdown笔记中去。</p> <h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; color: black; font-size: 16px; font-weight: bold; text-align: center;"><span class="prefix" style="display: none;"></span><span class="content" style="border-bottom: 2px solid #DEC6FB; color: #595959;">PicGo的配置和使用</span><span class="suffix" style="display: none;"></span></h3> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">PicGo相对MPic来说,支持的图床更多,而且支持自定义插件的形式新建图床上传接口(前提是你会写Node.js。)</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">下载链接已经放在前面了,这里只说一下配置</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="http://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200319/163806925.png" alt="PicGo配置" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">PicGo配置</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这里需要注意的是,我们需要写的是存储区域,并不是EndPoint,这个跟MPic是不一样的。可以在阿里云OSS存储的概览界面查看。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">另外就是快捷键的设置,</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200320204835.png" alt="设置快捷键" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">设置快捷键</figcaption></figure> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">好了按照这个配置好了之后,就可以使用了。 和MPic一样,上传图片后会自动返回Markdown链接</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Picgo好用的一点在于,不会自动上传,减少了误触发。 这点比较好。但是速度和稳定性上,好像比MPic差一点。不过能忍。</p> <h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; color: black; font-size: 16px; font-weight: bold; text-align: center;"><span class="prefix" style="display: none;"></span><span class="content" style="border-bottom: 2px solid #DEC6FB; color: #595959;">阿里云OSS browser</span><span class="suffix" style="display: none;"></span></h3> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">这玩意儿就是个文件管理器,用处不太大。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">不过如果需要进行文件管理的时候,又不喜欢登后台的...可以下一个玩玩。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">反正是绿色版的。不用的时候就丢在那儿。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200320210218.png" alt="阿里云OSS Browser登录" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">阿里云OSS Browser登录</figcaption></figure> <ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; font-size: 15px; color: #595959; list-style-type: circle;"> <li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; font-size: 14px; font-weight: normal; color: #595959;"><a href="https://help.aliyun.com/document_detail/61872.html?spm=5176.8465980.entries.7.1cca1450nnwyQv" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">阿里云OSS下载地址</a></section></li></ul> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://wmcoding.oss-cn-hangzhou.aliyuncs.com/wmcoding/20200320211852.png" alt="OSSBrowser管理界面" style="width: auto; max-width: 100%; border-radius: 6px; display: block; margin: 20px auto; object-fit: contain;"><figcaption style="margin-top: 5px; text-align: center; display: block; font-size: 13px; color: #595959;">OSSBrowser管理界面</figcaption></figure> <h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 18px; font-weight: bold; display: inline-block; padding-left: 10px; border-left: 5px solid #DEC6FB; color: #595959;">划重点!5秒钟学会使用图床</span><span class="suffix"></span></h2> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">可能上面自建图床的方式对于非技术类作者有点太复杂了。那么请看这里,5秒钟(正负3秒,取决于你的网络速度,电脑性能和手速)学会使用图床。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">来,跟着我做!</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step1.打开浏览器,输入<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: #595959;">https://mdnice.com/</code></p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step2:正常写作,然后光标定位到在需要插入图片的地方,右键-图片-上传图片(截图请右键直接粘贴)</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step3:点击确定</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step4:屏气凝神,等待图片上传完成。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Step5:深藏功与名</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Markdown nice集成了图壳图床, 无论是对于微信公众号还是国内的博客都比较友好,很少出现博文中图片加载失败的情况。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">实测可以放心使用。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">P.S. 我和Markdown Nice团队没有利益相关,只是觉得这玩意儿太好用了。友情推荐,可能推荐的力度有点大...</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">但是如果你细心的注意到了就会发现。对于整个写作系统的介绍,我提供了技术流喜欢的技术方案,也提供了很多非技术人员或者不喜欢折腾的童鞋的“一键操作”方式。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">Markdown Nice绝对是这种“一键”操作中的佼佼者。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">还有无论是哪种方式,自己写的开心就好,如果因为我们的分享能给别人带来新的思路和体验,那就是最好不过的事情了。</p> <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">卧槽,是不是又煲了个鸡汤。。。</p> <p id="nice-suffix-juejin-container" class="nice-suffix-juejin-container" data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #595959; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px; margin-top: 20px !important;">本文使用 <a href="https://mdnice.com" style="text-decoration: none; word-wrap: break-word; color: #664D9D; font-weight: normal; border-bottom: 1px solid #664D9D;">mdnice</a> 排版</p></section>

原文出处:https://www.cnblogs.com/thecatcher/p/12535322.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部