Advertisement
Guest User

display

a guest
Jul 17th, 2019
80
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  <v-layout v-for="(_image, index) in images">
  2.                             <v-flex xs6 >
  3.                                 <img :src="_image.imageUrl" height="250" width="230" v-if="_image.imageUrl" class="grey darken-3 pa-2" />
  4.                                 <v-text-field label="Select Image" @click='pickMultipleFile(index)' v-model='_image.imageName' prepend-icon='attach_file'></v-text-field>
  5.                                 <input
  6.                                         type="file"
  7.                                         style="display: none"
  8.                                         ref="images"
  9.                                         accept="image/*"
  10.                                         @change="onFilePicked"
  11.                                 >
  12.                                 <v-icon v-if="_image.imageUrl" @click="">add</v-icon>
  13.                             </v-flex>
  14.                         </v-layout>
  15.  data:() => ({
  16.         imageName: '',
  17.         imageUrl: '',
  18.         imageFile: '',
  19.         images:[
  20.             {
  21.                 imageName: '',
  22.                 imageUrl: '',
  23.                 imageFile: '',
  24.             }
  25.         ]
  26.     }),
  27.     methods:{
  28.         pickFile () {
  29.             this.$refs.image.click ()
  30.         },
  31.         onFilePicked (e) {
  32.             const files = e.target.files;
  33.             if(files[0] !== undefined) {
  34.                 this.imageName = files[0].name;
  35.                 if(this.imageName.lastIndexOf('.') <= 0) {
  36.                     return
  37.                 }
  38.                 const fr = new FileReader();
  39.                 fr.readAsDataURL(files[0]);
  40.                 fr.addEventListener('load', () => {
  41.                     this.imageUrl = fr.result;
  42.                     this.imageFile = files[0]; // this is an image file that can be sent to server...
  43.                 })
  44.             } else {
  45.                 this.imageName = '';
  46.                 this.imageFile = '';
  47.                 this.imageUrl = '';
  48.             }
  49.         },
  50.  
  51.         //upload multiple image
  52.         pickMultipleFile(index){
  53.             this.$refs.images[index].click();
  54.         },
  55.  
  56.         onMultipleFilePicked(e){
  57.  
  58.         }
  59.  
  60.     },
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement