1.下载删除插件‘html5-fileupload’(百度去收索下载)放入‘public’文件下。
11.png
2.总路由上面设置上传图片的路由:
//上传图片路由
Route::resource('photos', 'PhotoController', ['only' => ['store']]);
121.png
3.在端口打印路由,会显示错误提醒你需要建控制器,根据他的路径跑命令,建立上传图片的控制器。
212.png
4.在上传图片的模板上加以引用JS插件。
5.模板上的js代码直接上图展示及模板上的部分代码:
113.png
<div class="am-g am-margin-top">
<div class="am-u-sm-4 am-u-md-2 am-text-right">
缩略图
</div>
<div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
<div class="am-form-group am-form-file new_thumb">
<button type="button" class="am-btn am-btn-success am-btn-sm">
<i class="am-icon-cloud-upload" id="loading"></i> 上传新的缩略图
</button>
<input type="file" id="image_upload">
<input type="hidden" name="image">
</div>
<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed"/>
<div>
<img src="" id="img_show" style="max-height: 200px;">
</div>
</div>
</div>
6.控制器代码:
/**
* 上传图片
*/
public function store(Request $request)
{
if ($request->hasFile('image') && $request->file('image')->isValid()) {
$allow_types = ['image/png', 'image/jpeg', 'image/gif'];
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)];
}
}
网友评论