ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例

本文实例讲述了ThinkPHP5+UEditor图片上传到阿里云对象存储OSS。分享给大家供大家参考,具体如下:

ThinkPHP5使用富文本UEditor,将富文本编辑框内上传在本地的图片,修改到阿里云对象存储OSS

ThinkPHP5加载UEditor ···· 略

UEditor下载:https://ueditor.baidu.com/website/download.html#ueditor

(或本站下载:https://www.jb51.net/codes/56667.html)

阿里云对象存储SDK下载:https://github.com/aliyun/aliyun-oss-php-sdk

一、配置项

ueditor目录:\public\static\admin\lib\ueditor\1.4.3
OSS配置文件目录:\application\config\oos.php
OSS SDK目录:\extend\oos

二、代码

1、OSS配置文件

<?php
return [
  'endpoint' => 'xxxx',
  'accessKeyId' => 'xxxxxxxxxxx',
  'accessKeySecret' => 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  'bucket' => 'xxxxx',
  'uploadurl' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', //个人配置用,上传图片访问头部完整链接
];

2、在UEditor下写入Oos.class.php控制器

*注:本人用的是相对路径,请自行对照自己的目录结构替换掉文件引入地址

<?php
require_once realpath(dirname(__FILE__) . '/../../../../../../../') . '/extend/oos/autoload.php';
use OSS\OssClient;
use OSS\Core\OssException;
class Oos
{
  protected $oos = null;
  protected $bucket = null;
  //获取OOS客户端
  protected function getOssClient(){
    if($this->oos === null){
      $config = require realpath(dirname(__FILE__) . '/../../../../../../../') .'/application/config/oos.php';
      $this->bucket = $config['bucket'];
      try {
        $this->oos = new OssClient($config['accessKeyId'], $config['accessKeySecret'], $config['endpoint'], false);
      } catch (OssException $e) {
        printf(__FUNCTION__ . "creating OssClient instance: FAILED\n");
        printf($e->getMessage() . "\n");
        return null;
      }
    }
    return $this->oos;
  }
  //上传
  public function upload($file,$save){
    $config = require realpath(dirname(__FILE__) . '/../../../../../../../') .'/application/config/oos.php';
    $save = 'upload/'.$save;
    $ossClient = $this->getOssClient();
    if (is_null($ossClient)) exit('链接存储失败');
    $result = $ossClient->uploadFile($this->bucket, $save, $file);
    return !empty($result['x-oss-request-id']);
  }
}

3、修改UEditor 上传图片的PHP文件,\public\static\admin\lib\ueditor\1.4.3\php\action_crawler.php

<?php
/**
 * 抓取远程图片
 * User: Jinqn
 * Date: 14-04-14
 * Time: 下午19:18
 */
set_time_limit(0);
include("Uploader.class.php");
include("Oos.class.php");
// 引入oss对象
$oos_config = require realpath(dirname(__FILE__) . '/../../../../../../../') .'/application/config/oos.php';
$oos = new Oos();
/* 上传配置 */
$config = array(
  "pathFormat" => $CONFIG['catcherPathFormat'],
  "maxSize" => $CONFIG['catcherMaxSize'],
  "allowFiles" => $CONFIG['catcherAllowFiles'],
  "oriName" => "remote.png"
);
$fieldName = $CONFIG['catcherFieldName'];
/* 抓取远程图片 */
$list = array();
if (isset($_POST[$fieldName])) {
  $source = $_POST[$fieldName];
} else {
  $source = $_GET[$fieldName];
}
foreach ($source as $imgUrl) {
  $item = new Uploader($imgUrl, $config, "remote");
  $info = $item->getFileInfo();
  $year = date('Ymd',time());//图片路径 (年/月) 自己设置
  $img_name = time().rand(1,1000).$info['type'];
  $bos_url = "ueditor_upload/xinjieshi/image/$year/$img_name";//用作保存的图片路径和名字
  $oos->upload($_SERVER['DOCUMENT_ROOT'].'/'.$info['url'],$bos_url);
  array_push($list, array(
    "state" => $info["state"],
    "url" => $oos_config['uploadurl'].$bos_url,
    "size" => $info["size"],
    "title" => htmlspecialchars($info["title"]),
    "original" => htmlspecialchars($info["original"]),
    "source" => htmlspecialchars($imgUrl)
  ));
}
/* 返回抓取数据 */
return json_encode(array(
  'state'=> count($list) ? 'SUCCESS':'ERROR',
  'list'=> $list
));

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

时间: 2019-08-03

百度ueditor组件上传图片后如何设置img里的alt属性

百度ueditor组件,使用上传图片后,自动将上传图片显示在编辑器中,也就是插入了一个<img>标签.并设置了一个alt属性,其值是上传图片时的本地路径.暂时没发现哪里可以配置这个值.在查看发布的内容时,看到alt的值是一个磁盘路径,有点别扭. 可以在编辑完内容,保存到数据库时过滤下,修改alt的内容,也可以直接修改源码 function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || ifr

ueditor编辑器不能上传图片问题的解决方法

ueditor是百度编辑器,在本地的iis环境是可以上传图片了,但放在服务器的iis环境无法上传图片了,经过搜索发现是iis设置问题,引起这个问题的主要原因是,大多数虚拟主机不会给IIS匿名账号访问磁盘上的非用户目录,连读取的权限都没有,既然我们不能解决iis问题只有从代码设置了,具体如下. 在上传不了图片时,可以用浏览器的自带的调试工具查看报错,你可以看一个"拒绝访问或文件已存在"的错误.仔细调试分析,终于找到问题所在. 在它的upload.class.asp中,有如下一个函数: P

ThinkPHP5.0 图片上传生成缩略图实例代码说明

很多朋友遇到这样一个问题,图片上传生成缩略图,很多人在本机(win)测试成功,上传到linux 服务器后错误. 我也遇到同样的问题.网上一查,有无数的人说是服务器临时文件目录权限问题. 几经思考后,发现并非如此. 其根本的原因是,保存到变量的信息是之前的,之后又move移动到了自己指定的目录下,同时临时文件已经不存在.所以再生成缩略图的时候,需要open的,文件地址应该是自己定义的目录+文件名.然而很多实例文档中,还是使用的move 之前的信息. 又加之在win服务器下,move后,指定目录已生

ThinkPHP5+Layui实现图片上传加预览功能

html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width

关于UEditor编辑器远程图片上传失败的解决办法

远程图片上传是个很有意思的东西,比如你从别的网站复制一段文件,如果文字中带有图片,编辑器会自动将图片提取出来,进行上传,从而不用担心远程图片失效后,自己本地也无法浏览. 通过检查,发现远程图片上传的操作页面是:getRemoteImage.php .打开后我们先配置 savePath ,因为不同用户使用,需要存放到不同的目录,以免混乱,也方便管理 修改后代码: 复制代码 代码如下: //远程抓取图片配置 if(isset($_SESSION['admin'])){ $myPath = 'http

YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

thinkphp5上传图片及生成缩略图公共方法(分享)

直接上代码,可以写在公共文件common和继承的基础类中,方便调用 /* * $name为表单上传的name值 * $filePath为为保存在入口文件夹public下面uploads/下面的文件夹名称,没有的话会自动创建 * $width指定缩略宽度 * $height指定缩略高度 * 自动生成的缩略图保存在$filePath文件夹下面的thumb文件夹里,自动创建 * @return array 一个是图片路径,一个是缩略图路径,如下: * array(2) { ["img"] =

基于ThinkPHP5.0实现图片上传插件

效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

PHP结合Ueditor并修改图片上传路径

前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找到配置文件修改它.配置文件位置: ueditor/php/config.json 内容如下: /* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片

UEditor编辑器自定义上传图片或文件路径的修改方法

使用ueditor编辑器,附件默认在ueditor/php/upload/,  我的附件地址是网站根目录下/data/upload/ ,需要修改ueditor如下: 第一步:打开php/config.php修改图片目录 复制代码 代码如下: return array( //图片目录    'imageSavePath' => array (        '../../../../data/upload'    ) ); 第二步:图片上传后去掉相对路径php/imageUp.php 复制代码 代

thinkPHP5框架整合plupload实现图片批量上传功能的方法

本文实例讲述了thinkPHP5框架整合plupload实现图片批量上传功能的方法.分享给大家供大家参考,具体如下: 在官网下载plupload http://http//www.plupload.com 或者点击此处本站下载. 这里我们使用的是pluploadQueue 在HTML页面引入相应的css和js,然后根据示例代码修改为自己的代码 <link rel="stylesheet" href="/assets/plupupload/css/jquery.plupl

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】

本文实例讲述了Thinkphp5+plupload实现支持实时预览的图片上传功能.分享给大家供大家参考,具体如下: 今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文件的上传,例如视频文件,音频文件,word文件等等,而且大文件都采用分片上传的机制. Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverli

ThinkPHP框架实现FTP图片上传功能示例

本文实例讲述了ThinkPHP框架实现FTP图片上传功能.分享给大家供大家参考,具体如下: 背景: 图片上传功能应该是个极为普遍的,在此参考了ThinkPHP 框架中的集成方法整理了一下FTP图片的上传功能,这样方便在后台操作时,把有关的图片直接上传到线上的图片服务器,避免大流量访问的图片加载缓慢,降低网站的访问压力,不合理之处,敬请指摘... 操作: 1.前端设计 这里主要为了测试功能的实现,使用最简单的设计,既方便参考又有利于后期的功能扩展.如下附upload.html主要代码,着重注意红框

Java实现的简单图片上传功能示例

本文实例讲述了Java实现的简单图片上传功能.分享给大家供大家参考,具体如下: import java.io.*; import java.net.*; /* *发送端 */ class picsend { public static void main(String[] args) throws Exception { if(args.length!=1) { System.out.println("请选择一张.jpg图片"); return; } File file = new F

Thinkphp5+uploadify实现的文件上传功能示例

本文实例讲述了Thinkphp5+uploadify实现的文件上传功能.分享给大家供大家参考,具体如下: 初次接触服务器端开发,边学习边试着做一个OTA后台服务器,费了好大劲才实现了文件上传和进度条显示. 遇到几个问题: 1. 大文件上传失败 2.上传取消X 符合显示不出来 3. 不知道如何传递变量值给后台php 记录下过程: 1. 下载uploadify 代码到工程里,如public\plug-ins\uploadify 下. 2. 前端脚本如下, 客户端在formData 中传递版本号,请看

yii2高级应用之自定义组件实现全局使用图片上传功能的方法

本文讲述了yii2高级应用之自定义组件实现全局使用图片上传功能的方法.分享给大家供大家参考,具体如下: 此例为yii2高组应用,这里只提供一个简单的事例 在yii2中,在使用到上传图片时有自带的一个上传图片类,但不太好用. 其中有一种方式,把自己写的一个上传图片类文件,注册成一个组件,在全局中使用.(我记得我在里面有写过一篇小物件的使用) 这里,我只作一个简单的自定义组件介绍 1.在backend(或frontend)定义一个 upload.php(注意路径: backend/component

Summernote实现图片上传功能的简单方法

还是接着之前说过的最近在写一个BootStrap网页....然后要用富文本编辑器,随便搜了下就选了这货 然后发现了很尴尬的问题...图片上传功能无效....然后各种搜索各种无果...最后怒翻Summernote官方文档总算解决了,总之写下解决过程 后端部分就不提供代码了,满大街都是,这里假设后端拿到上传文件后返回文件的地址 首先附上参考资料:Summernote官方开发文档 简单说下Summernote的图片上传功能实现方案 首先根据官方文档提供的API,挂接文件上传事件,然后自己用JS重新上传

ReactNative实现图片上传功能的示例代码

最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的. 如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢? 通过搜索React-native的github, 会发现里面有这么一篇文章:https://github

Android中使用GridView实现仿微信图片上传功能(附源代码)

由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下面的图片就是点击"加号"后弹出的对话框,通过对话框可以根据自己需求进行相片选择. 项目结构: 下面直接上代码. 整体的布局文件activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/

Laravel+Layer实现图片上传功能(整理篇)

♩ 背景 昨天在自己的 Laravel5.5 框架项目中,希望集成 Layer 的图片上传功能 但是在 ajax(POST) 提交请求时,一直显示 500 报错 ♪ 分析 ⒈ 问题所在 最后将核心代码摘出,放到 Larvel 框架以外运行,发现代码是没有问题的,因为对 Laravel 框架接触的太浅,忽视了 CSRF 的限制 ⒉ 解决方案 一般在表单提交时,都会存放一个隐藏的输入框 <input type="hidden" name="_token" valu

asp.net core集成CKEditor实现图片上传功能的示例代码

背景 本文为大家分享了asp.net core 如何集成CKEditor ,并实现图片上传功能的具体方法,供大家参考,具体内容如下. 准备工作 1.visual studio 2019 开发环境 2.net core 2.0 及以上版本 实现方法 1.新建asp.net core web项目 2.下载CKEditor 这里我们新建了一个系统自带的样本项目,去 CKEditor官网下载一个版本,解压后拷贝大wwwroot中 3.增加图片上传控制器 @using CompanyName.Projec