Edit pic add job

resources/js/views/Addjob.vue

 <template>
     <div>
-        
         <v-layout row wrap class="border-div pa-0 my-3">
             <v-flex xs12 sm12 class="pa-3">
                 <h2 class="font-weight-bold red--text">ข้อมูลบริษัท</h2>
             </v-flex>
+            <form enctype="multipart/form-data" >
             <v-flex sm12>
                 <v-layout row wrap class="borderbottom pa-3">                           
                     <v-flex sm3 xs12>
                         <v-layout align-center justify-center fill-height>
-                            <img src="https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png" alt="" width="180">
+                            <input type="file" accept="image/*" class="input-file" ref="inputFile" @change="selectFile">
+                            <v-tooltip right>
+                                <template v-slot:activator="{ on }">
+                                    <img v-on="on" class="img" @click="$refs.inputFile.click()" :src="srcImage" alt="" width="180">
+                                </template>
+                                <span>{{ status }}</span>
+                            </v-tooltip>
                         </v-layout>
                     </v-flex>
                     <v-flex sm9 xs12>
@@ -178,12 +184,50 @@
                         <v-btn color="red accent-4" dark>บันทึกข้อมูล</v-btn>
                     </v-layout>
                 </v-layout>
-                
             </v-flex>
+            </form>
         </v-layout>
     </div>
 </template>
 
+<script>
+export default {
+    data () {
+        return {
+            status: 'ยังไม่ได้เลือกไฟล์',
+            srcImage: 'https://asianinteriorservices.com/wp-content/uploads/2018/04/noImg.png'
+        }
+    },
+    methods: {
+        selectFile (e) {
+            const file = e.target.files
+            if (!file.length) {
+                return
+            }
+            this.status = file[0].name
+            this.showImage(file[0])
+            this.getBlob(file[0], file[0].type)
+        },
+        showImage (file) {
+            const reader = new FileReader()
+            reader.onload = e => {
+                this.srcImage = e.target.result
+            }
+            reader.readAsDataURL(file)
+        },
+        getBlob (file, type) {
+            const reader = new FileReader()
+            reader.onloadend = e => {
+                let imgBlob = new Blob([e.target.result], { type: type })
+                console.log(imgBlob)
+            }
+            reader.readAsArrayBuffer(file)
+        }
+    }
+}
+</script>
+
+
 <style lang="scss" scoped>
     .detail {
         color: #276f86;
@@ -232,66 +276,75 @@
         border: 1px solid #ced4da;
         border-radius: 0.25rem;
         transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-        }
+    }
 
-        @media (prefers-reduced-motion: reduce) {
+    @media (prefers-reduced-motion: reduce) {
         .form-control {
             transition: none;
         }
-        }
+    }
 
-        .form-control::-ms-expand {
-        background-color: transparent;
-        border: 0;
-        }
+    .form-control::-ms-expand {
+    background-color: transparent;
+    border: 0;
+    }
 
-        .form-control:focus {
-        color: #495057;
-        background-color: #fff;
-        border-color: #80bdff;
-        outline: 0;
-        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-        }
+    .form-control:focus {
+    color: #495057;
+    background-color: #fff;
+    border-color: #80bdff;
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    }
 
-        .form-control::-webkit-input-placeholder {
-        color: #6c757d;
-        opacity: 1;
-        }
+    .form-control::-webkit-input-placeholder {
+    color: #6c757d;
+    opacity: 1;
+    }
 
-        .form-control::-moz-placeholder {
-        color: #6c757d;
-        opacity: 1;
-        }
+    .form-control::-moz-placeholder {
+    color: #6c757d;
+    opacity: 1;
+    }
 
-        .form-control:-ms-input-placeholder {
-        color: #6c757d;
-        opacity: 1;
-        }
+    .form-control:-ms-input-placeholder {
+    color: #6c757d;
+    opacity: 1;
+    }
 
-        .form-control::-ms-input-placeholder {
-        color: #6c757d;
-        opacity: 1;
-        }
+    .form-control::-ms-input-placeholder {
+    color: #6c757d;
+    opacity: 1;
+    }
 
-        .form-control::placeholder {
-        color: #6c757d;
-        opacity: 1;
-        }
+    .form-control::placeholder {
+    color: #6c757d;
+    opacity: 1;
+    }
 
-        .form-control:disabled, .form-control[readonly] {
-        background-color: #e9ecef;
-        opacity: 1;
-        }
+    .form-control:disabled, .form-control[readonly] {
+    background-color: #e9ecef;
+    opacity: 1;
+    }
 
-        select.form-control:focus::-ms-value {
-        color: #495057;
-        background-color: #fff;
-        }
+    select.form-control:focus::-ms-value {
+    color: #495057;
+    background-color: #fff;
+    }
 
-        .form-control-file,
-        .form-control-range {
-        display: block;
-        width: 100%;
-        }
+    .form-control-file,
+    .form-control-range {
+    display: block;
+    width: 100%;
+    }
+
+    .img {
+        cursor: pointer;
+        border: 1px solid;
+    }
+
+    .input-file {
+        display: none;
+    }
 </style>