layui自带的upload模块可以帮助我们快速上传图片，现在我们需要将图片使用layui组件上传至七牛云，一起来学习如何实现的吧！
1.进入到项目根路径，跑七牛云官方包
composer require qiniu/php-sdk
2.根据Access Key 和 Secret Key获取到我们所需要的上传token
2.1我们在api路由上新增一条路由规则
Route::namespace('Admin')->group(function () {
Route::get('/qiniutoken', 'QiniuController@token');
});
2.2创建一个控制器，用于获取七牛云的token，编写相应的api路由，
php artisan make:controller /Admin/QiniuController
查看路由可以看到我们的路由已经建立好了
image.png
2.3打开QiniuController编写我们的控制器
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Qiniu\Auth;
class QiniuController extends Controller
{
public function token()
{
$accessKey = "3gEwpRiuRXAtluNIiZ3DEqqwcLb4jxxxxxxxxxxxx";
$secretKey = "lk1eRDplWUprupfoxxxxxxxxxxxxxxxxxxxxxxxxxxx";
$bucket='4vsy';
// 初始化Auth状态
$auth = new Auth($accessKey, $secretKey);
// 简单上传凭证
$expires = 3600;
$policy = null;
$upToken = $auth->uploadToken($bucket, null, $expires, $policy, true);
return ['token'=>$upToken];
}
}
访问地址已经可以拿到token了
image.png
3.准备你要上传表单页面，并编写对应的js(以下代码仅截取片段)
前台表单页面html
<div class="layui-form-item">
<label class="layui-form-label">栏目缩略图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-primary" id="topicImg"><i class="layui-icon"></i>上传图片</button>
<div style="width: 300px"><img src="" alt="" id="prevImg"></div>
<input type="hidden" name="photo" id="photoInp">
<div id="demoText"></div>
</div>
</div>
对应的js上传部分
upload.render({
elem: '#topicImg',
url: 'http://upload-z2.qiniup.com',
size: 500 //限制文件大小，单位 KB
,before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#prevImg').attr('src', result); //图片链接（base64）
});
},
done: function(res) {
$('#photoInp').attr('value', res.key);
},
error: function(){
//演示失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
},
data: {
token: function(){
var token;
$.ajax({
async:false,//ajax 非异步获取taken
type: 'get',
url: '/api/qiniutoken',
success: function (res) {
token = res.token;
}
});
return token;
}
}
});
当我们拿到隐藏的key后拼接上我们的图片上传域名就能直接使用了。
当然我们想自定义文件名时，date追加额外的字段key 例如data:{token:token,key:'201905100212.png'}即可！
至此图片上传基本完成，大家可以类似的举一反三自行测试！！！
