fix/uploadPictureInCompressedMethod

resources/assets/js/pages/booking/uploadUserBankSlip.vue

@@ -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);