laravel刀片视图中的Vue.js组件冲突

在我的laravel刀片视图中有两个相同的组件，但它们相互冲突

我正在努力实现的目标：

<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>

我制作了一个vue组件，它将文件上传到firebase并存储在我的数据库中。在我的刀片视图中，我有两个地方要使用此组件。我使用道具配置组件，以便组件知道将文件存储在何处

出了什么问题：

<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>

每次我尝试上载包含第二个组件的文件时，我都会启动第一个组件中的函数。如何修复组件不冲突的问题

My laravel balde视图：

<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>

组成部分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>

基斯贝斯特兰德酒店
从'../../firebase.js'导入{fb}；
导出默认值{
数据（）{
返回{
文件对象：{
文件路径：null，
url:null，
文件：null，
resizedPath:null
},
加载：错误
};
},
安装的（）{
console.log（this.size）
console.log（this.fillmode）
},
道具：[
“用户数据”，
“存储路径”，
“商店路线”，
“大小”，
“填充模式”
],
方法：{
选择文件（事件）
{
var file=event.target.files[0]；
this.fileObject.file=文件
this.fileObject.filePath=this.store_path+'/'+file.name
this.fileObject.resizedPath=this.store_path+'/resized-'+file.name
如果（file.type=='image/png'| | file.type=='image/jpeg'）
{
this.uploadFile（this.fileObject）
}否则{
这是一条成功的消息({
标题：“Oeps！”，
消息：“deafbeelding moet een png of een jpeg zijn！”，
blockClass:“成功消息”
});
}
},
上载文件（文件对象）
{
var vm=这个
console.log（文件对象）
var storageRef=fb.storage（）.ref（fileObject.filePath）
var uploadTask=storageRef.put（fileObject.file）
这是真的
uploadTask.on（'state_changed'，函数（快照）{
var progress=（snapshot.bytesttransfered/snapshot.totalBytes）*100；
}，函数（错误）{
}，函数（）{
var resizeImage=fb.functions（）.httpscalable（'resizeImage'））
resizeImage（{filePath:fileObject.filePath，contentType:fileObject.file.type，水印：false，size:vm.size，fit:vm.fillmode}）。然后（函数（结果）{
var downloadRef=fb.storage（）.ref（fileObject.resizedPath）；
downloadRef.getDownloadURL（）.then（函数（url）{
fileObject.url=url
vm.loading=false
vm.storeImage（文件对象）
}).catch（函数（错误）{
console.log（错误）
})
}).catch（函数（错误）{
});
});
},
storeImage（文件）
{
axios.post（“/api/app/store_file”{
api_令牌：此.user_data.api_令牌，
user:this.user\u数据，
档案：档案，
storeRoute:this.store\u路线
})。然后（（res）=>{
location.reload（）
}).catch（（e）=>{
});
}
}
}

---

有人知道如何解决这个问题吗？

你是如何调用你的上传方法的？我会在文件输入发生变化时启动selectFile。它从那里激发其余的函数。