1.下載刪除插件‘html5-fileupload’(百度去收索下載)放入‘public’文件下农猬。
11.png
2.總路由上面設置上傳圖片的路由:
//上傳圖片路由
Route::resource('photos', 'PhotoController', ['only' => ['store']]);
121.png
3.在端口打印路由烦却,會顯示錯誤提醒你需要建控制器,根據(jù)他的路徑跑命令菱鸥,建立上傳圖片的控制器。
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)];
}
}