omair/exchange
1
0
Fork 0
mirror of https://gitlab.com/omair-personal/exchange.git synced 2026-08-19 04:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix/uploadPictureInCompressedMethod

Browse Source
This commit is contained in:
lonetrinity
2018-09-28 18:10:50 +08:00
parent aeb1329338
commit 860dec47e9
3 changed files with 80 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/BookingController.php
+38 -29
View File
@@ -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();
package.json
+2
View File
@@ -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",
resources/assets/js/pages/booking/uploadUserBankSlip.vue
+40 -13
View File
@@ -58,11 +58,27 @@
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog> -->
<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false"
:on-success="handleUploadSuccess" :before-upload="beforeFileUpload" algin="center">
<el-upload
class="avatar-uploader"
ref="upload"
action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
:auto-upload="false"
:show-file-list="false"
:on-success="handleUploadSuccess"
:on-change="beforeFileUpload"
algin="center">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- <el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">select file</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> -->
</div>
</div>
@@ -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);