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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。