Конфликт компонента Vue.js в виде лезвия laravel - PullRequest
Новая
       18

Конфликт компонента Vue.js в виде лезвия laravel

0 голосов
/ 07 ноября 2019

У меня есть 2 одинаковых компонента в моем виде лезвия ларавеллы, но они конфликтуют.

Что я пытаюсь сделать:

Я имеюсделал компонент vue, который загружает файл в firebase и сохраняет его в моей базе данных. В моем виде лезвия у меня есть 2 места, где я хочу использовать этот компонент. Я настраиваю компонент с подпорками, чтобы компонент знал, где хранить файл.

Что идет не так:

Каждый раз, когда я пытаюсь загрузить файл со вторым компонентомЯ запускаю функцию в первом компоненте. Как я могу исправить то, что компоненты не могут конфликтовать?

Мой взгляд на лэравел:

компонент 1 

<uploadfile
:key="comp100"
:user_data="{{ Auth::user()->toJson() }}"
store_path="/users/{{ Auth::user()->username }}/settings/email_backgrounds"
:store_route="'settings.project_email'"
:size="1000"
fillmode="cover"
></uploadfile>

компонент 2 

<uploadfile
:key="comp200"
:user_data="{{ Auth::user()->toJson() }}"
store_path="/users/{{ Auth::user()->username }}/settings/email_backgrounds"
:store_route="'settings.project_email'"
:size="1000"
fillmode="cover"
></uploadfile>

Компонент Vue: 

<template>
   <div class="vue-wrapper">
      <FlashMessage position="right top"></FlashMessage>
      <div v-if="loading" class="lds-dual-ring"></div>
      <div class="field">
         <div class="control">
            <label class="button main-button action-button m-t-20" for="uploadFiles"><span style="background-image: url('/images/icons/upload.svg')"></span>Kies bestand</label>
            <input type="file" name="uploadFiles" id="uploadFiles" class="dropinput" @change="selectFile">
         </div>
      </div>
   </div>
</template>

<script>

import { fb } from '../../firebase.js';

export default {
  data() {
   return {
      fileObject: {
         filePath: null,
         url: null,
         file: null,
         resizedPath: null
      },
      loading: false
   };
  },

  mounted() {
   console.log(this.size)
   console.log(this.fillmode)
  },

  props: [
   'user_data',
   'store_path',
   'store_route',
   'size',
   'fillmode'
  ],

  methods: {
    selectFile(event)
    {
      var file = event.target.files[0];

        this.fileObject.file = file
      this.fileObject.filePath = this.store_path + '/' + file.name
      this.fileObject.resizedPath = this.store_path + '/resized-' + file.name

      if(file.type == 'image/png' || file.type == 'image/jpeg')
      {
         this.uploadFile(this.fileObject)
      } else {
         this.flashMessage.success({
           title: 'Oeps!',
           message: 'De afbeelding moet een png of een jpeg zijn!',
           blockClass: 'success-message'
        });
      }

    },
   uploadFile(fileObject)
   {
      var vm = this
      console.log(fileObject)
      var storageRef = fb.storage().ref(fileObject.filePath)
      var uploadTask = storageRef.put(fileObject.file)

      this.loading = true

      uploadTask.on('state_changed', function(snapshot){
         var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      },function(error) {

      }, function() {
         var resizeImage = fb.functions().httpsCallable('resizeImage')
         resizeImage({filePath: fileObject.filePath, contentType: fileObject.file.type, watermark: false, size: vm.size, fit: vm.fillmode}).then(function(result){
            var downloadRef = fb.storage().ref(fileObject.resizedPath);
            downloadRef.getDownloadURL().then(function(url){
               fileObject.url = url
               vm.loading = false
               vm.storeImage(fileObject)
            }).catch(function(error){
               console.log(error)
            })
         }).catch(function(error){
         });
      });
   },
   storeImage(file)
   {
      axios.post('/api/app/store_file', {
         api_token: this.user_data.api_token,
         user: this.user_data,
         file: file,
         storeRoute: this.store_route
      }).then((res) => {
         location.reload()
      }).catch((e) => {

      });
   }
 }
}
</script>

Кто-нибудь знает, как это исправить?

...