在ThinkPHP5框架下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载

文章后面有完整Demo的GitHub链接。

一、 需求描述

1. 应用是基于ThinkPHP5开发的;

2. 服务器环境是LNMP,PHP版本是7.2,数据库是MySQL5.6;

3. 由用户(包括管理员)上传片一类的媒体文件不能直接上传到应用目录中,而要上传到单独的对象存储服务器上;

4. 需要使用富文本编辑器,编辑器中需要上传的片也都要保存到对象存储服务器;

5. 可以对已上传的图片进行删改查操作。

二、 方案选型

1. 框架:ThinkPHP 5.0.24(比较常用)

2. 编辑器:ueditor1_4_3_3-utf8-php(停更前的最新版本)

3. 对象存储:七牛云(免费10G空间,官方SDK齐全)

4. 开发环境:windows+WAMPServer

三、 产品设计

本文要做的只是一个demo,其中只包含需求中说明的功能,而其他相关的功能比如登录、权限之类的就不在本文的研究范围内。

对以上需求和方案进行分析,可以总结出本文demo需要实现的具体功能如下:

1. bucket管理(七牛云的存储空间),增删改查。

2. 图片管理,上传,增删改查,上传时将信息保存到数据库中,查询时从数据库读取数据并向云存储空间获取图片。

3. ueditor演示,插入本地图片时将图片上传到云存储中并向数据库插入记录,插入远程图片时从数据库读取数据并向云存储获取图片,查看远程列表时获取缩略图,插入时需要获取大图。

四、 实现过程

说明:本文将这个需求当作一个单独的项目来重现实现过程,而且这个实现过程中会对与本主题无关的但在开发过程中需要用到的内容做忽略处理(比如composer、比如其他前端框架),只关注问题本身。

这个demo使用的前端框架(库或插件)主要包括bootstrap、jquery、adminLte、jquery-lazyload等。

1. 在七牛云上准备开发者账号、存储空间和图片样式:

这一过程在本文中大致省略,在七牛官网上一步一步的操作即可,操作完成后需要记下几个参数:

access_key和secret_key(这里暂时只记录主账号的key,更复杂权限操作本文不深入研究);

存储空间的名称,本例创建两个空间分别名为wandoubaba和wandoubaba_user;

每个空间分别设置各自的图片样式,本例都用同样的样式策略(具体样式根据你的实际情况设置):

缩略图:w150.h150.cut

原图:original

原图水印图:original.water

限制宽度等比缩放:w800.water

限制高度等比缩放:h480.water

此外还要对每个存储空间分别绑定域名,七牛云虽然会默认提供一个域名,但是这个默认的域名只能使用1个月,所以还是自己去绑定一个,需要把每个空间对应的域名单独记录下来。

2. 创建并设计数据库:

mysql中创建数据库,名为tp-ue-qn-db:

CREATE DATABASE `tp-ue-qn-db` CHARACTER SET 'utf8mb4' COLLATE 'utf8mb4_general_ci';

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpsdyz.html