如今的网站图片量越来越大, 所以图片不太可能存到数据库,这样我们就必须采取措施, 比如存到第三方的云储存里,如很火的七牛云...
- 首先我们需要一个上传图片的插件,这里举例子的插件叫 html5-fileupload。
首先下载丢到public/vendor/
下, 在有页面提交的表单上引用该js文件,
然后创建一个上传图片的控制器 如photoController.php
。
- 先看js的代码
var options = {
type: 'POST',
url: '填你控制器的地址',
beforeupload: function() {
//上传成功之前的行为
},
success: function(res) {
if(res.status == 0) {
alert(res.msg);
return false
}
$("input[name='image']").val(res.msg); //将图片表单的值改为成功上传的路径
$("#img_show").attr("src", res.msg); //将显示图片的地址改为成功上传图片的路径
$("#loading").attr('class', 'am-icon-cloud-upload'); //图标 这个随你搞
}
error: function() {
//如果出错怎么办...
}
}
- 再看控制器里的代码
public function store(Request $request) {
if($request->hasFile('image') && $request->image->isValid()) {
$allow_types = ['image/png', 'image/jpeg', 'image/gif', 'image/jpg'];
if(!in_array($request->image->getMiMeType(), $allow_types)) {
return ['status'=> 0, 'msg'=> '图片类型不正确!'];
}
if($request->image->getClientSize() > 1024 * 1024 * 3) {
return ['status'=> 0, 'msg'=>'图片大小不能超过 3M'];
}
$path = $request->image->store('public/images');
// //上传到本地
// return ['status'=> 1, 'msg'=>'/storage'.str_replace('public', '', $path)];
//storage_path返回根目录下的storage的绝对路径 里面放的直接丢在后面
$filePath = storage_path('app/'.$path);
//上传到七牛
qiniu_upload($filePath); //调用的全局函数
//返回
return ['status'=> 1, 'msg'=> 'http://ow7pezvrt.bkt.clouddn.com/'.basename($filePath)];
}
}
- 控制器后面可能有些不知道的 先来安装七牛
在命令行打
composer require qiniu/php-sdk
跑完后, 我们就可以写一个全局函数了,在Http/Helpers
下创建一个qiniu.php
内容如下:
// 引入鉴权类
use Qiniu\Auth;
// 引入上传类
use Qiniu\Storage\UploadManager;
function qiniu_upload($filePath) {
// 需要填写你的 Access Key 和 Secret Key
$accessKey = "edj5WTd-8sURwN4qZD3YE2U9TDL4skSugNO6yevp";
$secretKey = "4o06NtzXmP0Tu0F8P77Lk4oHSO40zYMae7yXHmUl";
$bucket = "shop";
// 构建鉴权对象
$auth = new Auth($accessKey, $secretKey);
// 生成上传 Token
$token = $auth->uploadToken($bucket);
// 要上传文件的本地路径
// $filePath = './php-logo.png';
// 上传到七牛后保存的文件名
$key = basename($filePath);
// 初始化 UploadManager 对象并进行文件的上传。
$uploadMgr = new UploadManager();
// 调用 UploadManager 的 putFile 方法进行文件的上传。
$uploadMgr->putFile($token, $key, $filePath);
//删除本地图片
unlink($filePath);
}
然而全局函数可能并没有加载到composer.json里去
我们需要打开composer.json
然后我们重新加载这个
命令行输入
composer dump-autoload
这样函数就加载成功了。