php tp5上传图片到阿里云OSS

1.登录阿里云OSS管理控制台创建Bucket

（写入名称，这个我已经创建过了，我接下来会用到，注意Endpoint，后面会用到）

为了方便管理图片，可以在Bucket多建目录进行存放：

2.在tp5的config中做以下配置

 //阿里云OSS配置'alioss'     =>['KeyId'      => 'LTAI4Frk39sKAiJe3sRSKg4w',  //AccessKey ID'KeySecret'  => 'nV2XfBuTEFUUYfT2gHnFMUAgwwCinQ',  //Access Key Secret'EndPoint'   => 'oss-cn-beijing.aliyuncs.com',  //外网访问节点'Bucket'     => 'lten',  //Bucket名称],

AccessKey ID和 Access Key Secret可以在这里查看

3.到阿里云对象存储OSS官网文档，下载PHP的demo，下载后解压重命名文件夹为aliyun-oss，我放到了tp5的extend目录下面：

4.我定义了一个Common类，里面有上传图片的方法

 use \think\Controller;use think\Image;require_once APP_PATH . '/../extend/aliyun-oss/autoload.php';use OSS\Core\OssException;use OSS\OssClient;class Common extends Controller{/***上传图片的接口*/public function uploadtest(){$file = request()->file('file');$res = [];if($file){$res = self::uploadFile('banner',$file);if($res['code']==200){//图片完整地址$headimg = $res['data'];//业务逻辑省略......}else{return $this->error('上传失败');}return json($res);}}//上传图片到阿里云public static function uploadFile($mulu,$file) {$resResult = Image::open($file);try {$KeyId = config('alioss.KeyId');$KeySecret = config('alioss.KeySecret');$EndPoint = config('alioss.EndPoint');$Bucket = config('alioss.Bucket');//实例化$ossClient = new OssClient($KeyId, $KeySecret, $EndPoint);//sha1加密 生成文件名 连接后缀$fileName = $mulu.'/'.sha1(date('YmdHis', time()) . uniqid()) . '.' . $resResult->type();//执行阿里云上传$result = $ossClient->uploadFile($Bucket, $fileName, $file->getInfo()['tmp_name']);//图片地址:$result['info']['url']$arr = ['code'=>200,'msg'=>'上传成功','data'=>$result['info']['url']];} catch (OssException $e) {$arr = ['code'=>0,'msg'=>$e->getMessage(),'data'=>''];}return $arr;}}

5.前台

<div class="layui-upload" id="upload-thumb"><label class="layui-form-label">缩略图</label><button type="button" class="layui-btn" id="thumb">上传图片</button><div class="layui-upload-list"><label class="layui-form-label"></label><img class="layui-upload-img" id="demo1" width="150" height="150" {notempty name="$article.thumb"}src="{$article.thumb}"{/notempty}>{notempty name="$article.thumb"}<input type="hidden" name="thumb" value="{$article.thumb}">{/notempty}<p id="demoText"></p></div>
</div>

//上传图片接口layui.use('upload', function(){var upload = layui.upload;//执行实例var uploadInst = upload.render({elem: '#thumb' //绑定元素,url: "{:url('common/uploadtest')}" //上传接口,data:{use:'article_thumb'},done: function(res){//上传完毕回调if(res.code == 200) {//前台显示预览图$('#demo1').attr('src',res.data);$('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.data +'">');} else {layer.msg(res.msg);}},error: function(){//请求异常回调//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function(){uploadInst.upload();});}});});

php tp5上传图片到阿里云OSS相关推荐

整合百度UEditor上传图片到阿里云OSS
前言将图片上传到阿里云OSS是一种趋势,一个必然.当你的项目图片过多,需要频繁上传和替换的时候,用阿里云OSS可以很方便的管理你的图片,节省服务器空间,大大提高了效率.阿里云OSS是阿里云提供的海量 ...
微信小程序后台获取签名，裁剪并上传图片至阿里云oss
微信小程序后台获取签名,裁剪并上传图片至阿里云oss 首先,设置微信开发者工具,选择校验合法域名,防止本地可应使用,线上报错问题: 其次,在微信公众平台–小程序开发,设置合法域名 Oss设置–> ...
微信小程序上传图片到阿里云oss方法
最近开发微信小程序要求上传图片到阿里云oss上,所以就顺手整理一下整个过程啦. 前提开通oss服务和创建oss存储空间啦(这个就自己去解决吧)下面接入正题: 步骤一:配置 Bucket 跨域客户端 ...
uni-app 上传图片到阿里云oss
uni-app 上传本地图片或视频到阿里云oss,带中间圆形进度条前端控制文件直接将本地图片或视频上传到阿里云oss中,不用走后台接口即可上传 // 在自己的文件中引入配置主文件地址 import ...
微信小程序上传图片到阿里云OSS
微信小程序代码 1.wxml: <image src="{{userInfo.headImg}}" class="user-head_img" bindt ...
上传图片到阿里云oss时403 Forbidden
当点击上传按钮时,浏览器开发工具会出现如下错: 出现上述错误的原因可能有很多,下面是两种可能的解决方案: (1)查看阿里云oss是否是公共读(或者是公共读写) (2)是否设置跨域规则
swift3.0 从相册选取或者拍照上传图片至阿里云OSS
导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...
YII2 整合百度UEditor上传图片到阿里云OSS
yii2 composer 安装完 ueditor 后目录: \vendor\kucha\ueditor 修改Uploader.php文件添加: use common\helpers\MyHelp ...
Nuxt 整合 element-tiptap 编辑器上传图片到阿里云OSS关键方法
1 . api/upload.js export default ({$axios}, inject) => {// 上传文章内容图片(编辑器中上传)inject('uploadArticleI ...

php tp5上传图片到阿里云OSS

php tp5上传图片到阿里云OSS相关推荐

最新文章

热门文章