nodeodules

resources/js/vue/views/TestResult/AddEdit.vue

@@ -71,13 +71,15 @@
             ></v-select>
           </v-flex>
           <v-flex xs12 sm4 md4>
-             <div v-if="!image">
-                <input type="file" class="inputfile" @change="onFileChange" multiple>
-                <label for="file"><v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file</label>
+             <div  >
+                <input type="file" class="inputfile" @change="onFileChange" multiple />
+                <label f or="file"><v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file</label>
               </div>
-              <div v-else>
-                <img :src="image" style="width:100%;"/>
-                <button @click="removeImage">Remove image</button>
+              <div >
+                <div v-for="(img, key) in images" :key="key">
+                  <img :src="img" style="width:100%;"/>
+                  <button @click="removeImage(key)">Remove image</button>
+                </div>
               </div>
           </v-flex>
           <v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
@@ -222,7 +224,7 @@ export default {
       img: null,
       test_type_id: "",
     },
-    image: null,
+    images: [],
   }),
   created() {
     if (this.$route.params.testResult) {
@@ -285,26 +287,31 @@ export default {
       var files = e.target.files || e.dataTransfer.files;
       if (!files.length)
         return;
-      this.createImage(files[0]);
+      for (const key in files) {
+        if (files.hasOwnProperty(key)) {
+          this.createImage(files[key], key);
+        }
+      }
+      
     },
-    createImage(file) {
+    createImage(file, index) {
       var image = new Image();
       var reader = new FileReader();
       var vm = this;
 
       reader.onload = (e) => {
-        vm.image = e.target.result;
+        vm.images.push(e.target.result);
       };
 
       reader.readAsDataURL(file);
     },
-    removeImage: function (e) {
-      this.image = null;
+    removeImage (index) {
+      this.images.splice(index, 1);
     },
   },
   watch:{
-    image(img) {
-      this.formData.img = img;
+    images(img) {
+      this.formData.imgs = img;
     }
   }
 };