TP5使用wangEditor编辑器结合七牛云存储实现图片上传

HTML结构

<textarea cols="30" rows="10" id="textarea1"  class="layui-textarea"></textarea>

javascript

<!--引入jquery和wangEditor.js-->   <!--注意：javascript必须放在body最后，否则可能会出现问题-->
<script type="text/javascript" src="admin/edit/dist/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="admin/edit/dist/js/wangEditor.min.js"></script>

// 获取元素
var textarea = document.getElementById('textarea1');
// 生成编辑器
var editor = new wangEditor(textarea);
editor.config.uploadImgUrl = '{:url("share/loads")}';//图片上传路径
editor.create();

后台引入七牛云

use Qiniu\Auth;//七牛
use Qiniu\Storage\BucketManager;//七牛获取文件
use Qiniu\Storage\UploadManager;//七牛上传

上传

    public function loads(){
        //引入七牛主文件
        require_once VENDOR_PATH . '/qiniu/php-sdk/autoload.php';
        // 获取表单上传文件 例如上传了001.jpg
        $file = request()->file('wangEditorH5File');
        $info = $file->validate(['ext'=>'jpg,png,gif']);
        $filePath = $file->getRealPath();
        if(filesize($filePath)>10000000){
            echo '超出大小';
        }else{
            // 获取表单文件路径
            $filePath = $file->getRealPath();
            // 需要填写你的 Access Key 和 Secret Key
            $accessKey = config('Access_Key');
            $secretKey = config('Secret_Key');
            // 构建鉴权对象
            $auth = new Auth($accessKey, $secretKey);
            // 空间域名
            $bucketUrl = "http://share.520anan.com/";
            // 要上传的空间
            $bucket = "chen";
            // 生成上传 Token
            $token = $auth->uploadToken($bucket);
            $ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION);  //后缀
            // 上传到七牛后保存的文件名
            $key = substr(md5($file->getRealPath()) , 0, 5). rand(0, 9999) . '.' . $ext;
            // 初始化 UploadManager 对象并进行文件的上传
            $uploadMgr = new UploadManager();
            // 调用 UploadManager 的 putFile 方法进行文件的上传
            list($ret, $err) = $uploadMgr->putFile($token, date("Ymd")."_share_".$key, $filePath);
            if ($err !== null) {
                var_dump($err);
            } else {
                return $bucketUrl . '/' . date("Ymd")."_share_".$key;
            }
        }

    }

获取

//获取七牛下面所有文件
    public function img(){
        //引入七牛主文件
        require_once VENDOR_PATH . '/qiniu/php-sdk/autoload.php';
        $accessKey = config('Access_Key');
        $secretKey = config('Secret_Key');
        $auth = new Auth($accessKey, $secretKey);
        $bucketMgr = new BucketManager($auth);
        // 要列取的空间名称
        $bucket = "chen";
        // 要列取文件的公共前缀
        $prefix = '';
        // 上次列举返回的位置标记，作为本次列举的起点信息。
        $marker = '';
        // 本次列举的条目数
//        $limit = 3;
        // 列举文件
        $list = $bucketMgr->listFiles($bucket, $prefix, $marker);
        $list = array_filter($list);
        $this->assign([
            'list' => $list
        ]);
        return $this->fetch();
    }

删除

    //ajak删除七牛文件
    public function del($id){
        $info = array(
            'code'=>'200',
            'tips'=>'提示',
            'data'=>'资源'
        );
        //引入七牛主文件
        require_once VENDOR_PATH . '/qiniu/php-sdk/autoload.php';
        $accessKey = config('Access_Key');
        $secretKey = config('Secret_Key');
        //初始化Auth状态
        $auth = new Auth($accessKey, $secretKey);
        //初始化BucketManager
        $bucketMgr = new BucketManager($auth);
        // 要列取的空间名称
        $bucket = "chen";
        $key = $id;
        //删除$bucket 中的文件 $key
        $err = $bucketMgr->delete($bucket, $key);
//        echo "\n====> delete $key : \n";
        if ($err !== null) {
            var_dump($err);
        } else {
            $info['tips'] = '删除成功';
            return json($info);
        }
    }

编辑器官方地址

http://www.wangeditor.com/index.html

上一篇：HTML搭配CSS的常用样式

下一篇：忘记密码 用邮箱来设置新密码-Thinkphp5框架