免插件免备案 - WordPress使用OSS加速网站

e0ef79e72c384f7d9f91ab67ceb46c0a7ad9d44a


  相信很多草根站长的服务器带宽都不会以G来计算,但有些同学的网站上图又不少,这就大大增加了服务器带宽的压力,下面我就谈谈自己是如何运用OSS以G为计的超宽超强超流弊带宽为自己的小站来加速的~文中只谈及了对图像的运用,其实对文件类型是不限制的,只要你用OSS绑定域名(下边会聊到,看完你就知道了)给出绝对路径,什么类型的静态文件都是可以加速的!!!  


 首先在阿里云免费开通OSS>> https://www.aliyun.com/product/oss 

 然后在OSS控制台新建Bucket


55072416b1ff93229af7d244fd78b1cc7204bf32


  区域可以选择香港,每月有5GB的免费存储空间和5GB外网流出流量,重点是绑定域名免备案。当然你也可以选择大陆地区,存储和流量费用也不是很贵,具体收费标准请自己去 https://www.aliyun.com/price/product#/oss/detail 查看,但如果你选择了大陆地区时一定要注意的是你的域名一定得是备案的!!!


d6b775df67ab50905f56ebfa0d13503c3f38e0c0


  关于Bucket这几点很重要,请一定要认真设定,首先在基础设置中修改防盗链设置,Referer中输入你的主域名,一般情况下是www开头的,我是用演示站点所以才以DEMO开头的,别照搬!!!如果不希望别人可以直接通过链接访问你的图片请不要允许Referer为空。再次重申这个设置很重要,不要怪我唠叨,设置不好会给你带来直接的经济损失,毕竟流量就是钞票,被盗链了跑的可是你的流量!!!


7003a31de7d8ee5c9a87ae43a8d1608316b1cbeb


  接下来同样在基础设置里找到镜像回源并创建规则,虽然这个也很重要,但我不会太唠叨,反正设定错误只会让你用不了而与~回源地址填入你的主域名,别的默认就好。 


e7309e68e4b71a0a9769d3e6a0bb2b848baef68b


  这一步不是必须的,但对你将来的网站维护管理很重要。域名管理中绑定一个你自己的域名并完成域名的CNAME设定,例如我用的是 image.stumblingblock.cn 。其实用阿里云提供的访问域名也不是不可以,但你有没想过有一天要是和阿里分手了怎么办,一个个去改链接吗???所以用自己的域名最大的好处就是如果我和阿里分了手,我可以立马把域名解析到百度云或自己的服务器,移情别恋就这么容易!!! 实话说,我现在才发现这张图截漏了,算了,绑定个域名不是太难,就不回去补了! 至此对OSS的设定也就基本结束,别的一些设定同学们没事时自己了解一下,我没设定太多不是不必要,是自己没时间细细研究!


     接下来我们再到WordPress里进行简单的修改和设定就可以了,首先在你的主题中修改模板函数 functions.php 文件,在最下方加入以下代码开启媒体库默认上传路径和文件的完整URL地址的设定框。


//参数修改 - 媒体库默认上传路径和文件的完整URL地址
 if(get_option('upload_path')=='wp-content/uploads' ||
 get_option('upload_path')==null) {
update_option('upload_path',WP_CONTENT_DIR.'/uploads'); }


免插件 - WordPress使用OSS加速网站 


  然后进入 设置>媒体 后你就会发现多出了两个输入框,这也就是我们的最后一步。默认路径改不改都行,我是按自己的习惯把上传路径移出了wp-content/uploads变更为image/uploads(保存后会变成一个很长的路径,不用再意!)。文件的完整URL地址只需要在上传路径前加上你绑定在OSS的域名就可以,例如我的是 http://image.stumblingblock.cn/image/uploads 。然后就没有然后了!在媒体库中看一下你的图片路径只要是OSS绑定的域名开头的,并且显示正常就OK了,如果有错重新检查你有没有漏步骤或者呼叫我都是可以的~


免插件 - WordPress使用OSS加速网站 


补充下:别的云存储设定上应该差不多,我就不一个个去试了,同学们自己玩开心! 

如果还有什么要补充的会再次更新

原文地址 http://www.stumblingblock.cn/2504.html

使用<el-upload>上传oss的步骤如下: 1. 在<el-upload>组件中设置ref属性为"upload",并设置action属性为上传接口的URL地址。同时,设置multiple属性为true以支持多文件上传,设置limit属性为上传文件的数量限制。例如:<el-upload ref="upload" action="/upload" multiple :limit="3"> 2. 在methods中定义httpRequest方法,该方法用于调用服务端接口获取上传凭证。在该方法中,可以使用createUploadStsToken方法来获取上传凭证。例如:createUploadStsToken(this.folderId).then(res => { // 获取上传凭证的逻辑 }) 3. 在methods中定义handleRemove方法,该方法用于在文件上传前进行校验。可以在该方法中进行文件大小、文件类型等的校验。例如:beforeAvatarUpload(file) { // 文件上传前的校验逻辑 } 4. 在methods中定义beforeAvatarUpload方法,该方法用于在文件上传前进行校验。可以在该方法中进行文件大小、文件类型等的校验。例如:beforeAvatarUpload(file) { // 文件上传前的校验逻辑 } 5. 在data中定义fileList数组,用于存储已上传的文件列表。例如:data() { return { fileList: [] } } 6. 在<el-upload>组件中使用file-list属性绑定fileList数组,以实现文件的回显功能。例如:<el-upload :file-list="fileList"> 7. 在<el-upload>组件中添加一个按钮,用于触发文件选择对话框。例如:<el-button type="info" size="mini">点击上传</el-button> 8. 在methods中定义handleUploadSubmit方法,该方法用于提交文件上传请求。在该方法中,可以调用this.$refs['upload'].submit()来触发文件上传。例如:handleUploadSubmit() { this.$refs['upload'].submit(); } 9. 最后,需要注意的是,如果需要删除阿里云服务器上的废弃文件,可以调用client.delete方法来删除对应的文件。例如:client.delete(对应的文件名) 请注意,以上步骤仅为示例,具体实现可能会根据实际情况有所不同。同时,还需要注意处理文件上传跨域问题,可以在控制台进行相关配置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值