From 860dec47e903399d5eac38294701b02bdfbc5f25 Mon Sep 17 00:00:00 2001 From: lonetrinity Date: Fri, 28 Sep 2018 18:10:50 +0800 Subject: [PATCH] fix/uploadPictureInCompressedMethod --- app/Http/Controllers/BookingController.php | 67 +++++++++++-------- package.json | 2 + .../js/pages/booking/uploadUserBankSlip.vue | 53 +++++++++++---- 3 files changed, 80 insertions(+), 42 deletions(-) diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php index 6a2d6e63..5722f34c 100644 --- a/app/Http/Controllers/BookingController.php +++ b/app/Http/Controllers/BookingController.php @@ -576,7 +576,7 @@ class BookingController extends Controller return response()->json(['book_id'=>$book_id],200); } - public function uploadbankslip(Request $request, $id) + private function uploadbankslip(Request $request, $id) { $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first(); @@ -586,40 +586,48 @@ class BookingController extends Controller return response()->json(['message'=>'Access denied'], 403); } - $validator = Validator::make($request->all(), [ - 'file' => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf' - ]); + // $validator = Validator::make($request->all(), [ + // 'slip_image' => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf' + // ]); - if($validator->fails()) - { - return response()->json(['message'=>'Incorrect format'],400); - } + // if($validator->fails()) + // { + // return response()->json(['message'=>'Incorrect format'],400); + // } - $validator = Validator::make($request->all(), [ - 'file' => 'max:10000' // image size - ]); + // $validator = Validator::make($request->all(), [ + // 'slip_image' => 'max:10000' // image size + // ]); - if($validator->fails()) - { - return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400); - } + // if($validator->fails()) + // { + // return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400); + // } - if($bankslip_file = $request->file('file')) + if($bankslip_file = $request->input('slip_image')) { - /* End Validation */ - $filename = $bankslip_file->getClientOriginalName(); - $ext = $bankslip_file->getClientOriginalExtension(); - - - $unique_name = 'bank_slip_' . md5($filename. time()); // probably not a good idea - $unique_image_path = $unique_name. '.' .$ext; - - $upload_path = Storage::disk('public')->putFileAs( - 'user_bankslip', $bankslip_file, $unique_image_path - ); + $ext = explode('/', explode(':', substr($bankslip_file, 0, strpos($bankslip_file, ';')))[1])[1]; + $img = str_replace('data:image/'.$ext.';base64,', '', $bankslip_file); + $img = str_replace(' ', '+', $img); + $data = base64_decode($img); + $file_name = 'bank_slip_' . md5(time()).'.'.$ext; + if($bankslip_file!=""){ + // storing image in storage/app/public Folder + $upload_path = \Storage::disk('public')->put('user_bankslip'.'/'.$file_name, $data); + } + // /* End Validation */ + // // $filename = $bankslip_file->getClientOriginalName(); + // + // $unique_name = 'bank_slip_' . md5(time()); // probably not a good idea + // $unique_image_path = $unique_name. '.' .'jpg'; + // $image_parts = explode(";base64,", $bankslip_file); + // $upload_path = \Storage::disk('public')->put('user_bankslip'.'/'.$unique_image_path,base64_decode(base64_decode($image_parts[1]))); + // // $upload_path = Storage::disk('public')->putFileAs( + // // 'user_bankslip', base64_decode($image), $unique_image_path + // // ); if($upload_path){ $user_bankslip = $booking->userBankSlip()->first(); @@ -628,8 +636,8 @@ class BookingController extends Controller $user_bankslip = new UserBankSlip; } $user_bankslip->booking_id = $booking->id; - $user_bankslip->bankslip_path = $upload_path; - $user_bankslip->transfer_amount = $request->input('transfer_amount'); + $user_bankslip->bankslip_path = 'user_bankslip'.'/'.$file_name; + $user_bankslip->transfer_amount = null; $user_bankslip->save(); @@ -647,6 +655,7 @@ class BookingController extends Controller } public function updateBankSlipAmount(Request $request, $id){ + $this->uploadbankslip($request, $id); $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first(); $user_bankslip = $booking->userBankSlip()->first(); diff --git a/package.json b/package.json index 1836605b..51237498 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "bootstrap": "^4.0.0", "canvas2image": "^1.0.5", "element-ui": "^2.4.4", + "image-compressor.js": "^1.1.4", "jquery": "^3.3.1", "js-cookie": "^2.2.0", "laravel-echo": "^1.4.0", @@ -34,6 +35,7 @@ "vue-axios": "^2.1.1", "vue-button-spinner": "^2.2.0", "vue-i18n": "^7.6.0", + "vue-image-compressor": "^1.0.3", "vue-js-toggle-button": "^1.3.0", "vue-loader": "^14.2.2", "vue-loading-spinner": "^1.0.11", diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue index 0c12a311..d1bb5a7b 100644 --- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue +++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue @@ -58,11 +58,27 @@ --> - + + @@ -155,6 +171,7 @@ import ProgressTrack from '~/components/ProgressTrack' import X2ProgressTrack from '~/components/X2ProgressTrack' import axios from 'axios' + import ImageCompressor from 'image-compressor.js'; export default { middleware: ['auth'], @@ -177,7 +194,8 @@ dialogVisible: false, booking_id: this.$route.params.id, user_slip_form: { - transfer_amount: '' + transfer_amount: '', + slip_image: '' }, booking: { amount: '', @@ -292,14 +310,23 @@ beforeFileUpload(file) { //const isJPG = file.type === 'image/jpeg'; - const isLt10M = file.size / 10240 / 10240 < 2; - - // if (!isJPG) { - // this.$message.error('Avatar picture must be JPG format!'); - // } - if (!isLt10M) { - this.$message.error('File size can not exceed 10MB!'); - } + const isLt2M = file.size / 1024 / 1024 < 2; + var vm = this; + new ImageCompressor(file.raw, { + quality: .4, + convertSize: 1500000, + success(result) { + var reader = new FileReader(); + reader.readAsDataURL(result); + reader.onloadend = function() { + vm.imageUrl = reader.result; + vm.user_slip_form.slip_image = reader.result; + } + }, + error(e) { + console.log(e.message); + } + }); this.$message({ showClose: true, @@ -308,7 +335,7 @@ duration: 5000 }) // return isJPG && isLt2M; - return isLt10M; + return isLt2M; }, handleCoutdownend() { @@ -357,7 +384,7 @@ let newUserSlip = { transfer_amount: this.user_slip_form.transfer_amount } - axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', newUserSlip) + axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', this.user_slip_form) .then((response) => { console.log(response);