php tp5上传图片到阿里云OSS
生活随笔
收集整理的這篇文章主要介紹了
php tp5上传图片到阿里云OSS
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.登錄阿里云OSS管理控制臺創(chuàng)建Bucket
(寫入名稱,這個我已經(jīng)創(chuàng)建過了,我接下來會用到,注意Endpoint,后面會用到)
為了方便管理圖片,可以在Bucket多建目錄進行存放:
2.在tp5的config中做以下配置
AccessKey ID和 Access Key Secret可以在這里查看
3.到阿里云對象存儲OSS官網(wǎng)文檔,下載PHP的demo,下載后解壓重命名文件夾為aliyun-oss,我放到了tp5的extend目錄下面:
4.我定義了一個Common類,里面有上傳圖片的方法
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;//執(zhí)行實例var uploadInst = upload.render({elem: '#thumb' //綁定元素,url: "{:url('common/uploadtest')}" //上傳接口,data:{use:'article_thumb'},done: function(res){//上傳完畢回調(diào)if(res.code == 200) {//前臺顯示預(yù)覽圖$('#demo1').attr('src',res.data);$('#upload-thumb').append('<input type="hidden" name="thumb" value="'+ res.data +'">');} else {layer.msg(res.msg);}},error: function(){//請求異常回調(diào)//演示失敗狀態(tài),并實現(xiàn)重傳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();});}});});總結(jié)
以上是生活随笔為你收集整理的php tp5上传图片到阿里云OSS的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 用Ubuntu编写第一个C程序并预处理、
- 下一篇: 面向2022届毕业生-自动驾驶/SLAM