如何處理vue.js中的圖像文件？

Question

在我看來，我有這樣的：

<input type="file" @change="onFileChange"> 

在VUE我有這樣的：

onFileChange:function(e) { 
       var files = e.target.files || e.dataTransfer.files; 
       if (!files.length) 
       return; 
       this.createImage(files[0]); 
       this.intro_image = files[0]; 

      }, 
      createImage:function(file) { 
       var image = new Image(); 
       var reader = new FileReader(); 
       var vm = this; 

       reader.onload = (e) => { 
       vm.image = e.target.result; 
       }; 
       reader.readAsDataURL(file); 

      }, 

    editProperty: function() { 
       user_id = this.user_credentials.user_id; 
       property_id = this.property_credentials.property_id; 


       var property_credentials = { 

        intro_image: this.intro_image 

       }; 

       this.$http.patch('/profile/'+ user_id +'/property/'+ property_id +'/edit', property_credentials).then(function(response) { 
        $("html, body").animate({ scrollTop: 0 }, "slow"); 
        this.property_status = true; 
        this.property_success_update_message = response.data.successUpdateMsg; 
       } , function(response) { 
        $("html, body").animate({ scrollTop: 0 }, "slow"); 
        this.property_status = false; 
        this.property_errors = response.data 
       }); 
      }, 

在我的控制器我嘗試這一點，但總是空：

$intro_image = $request->intro_image; 

任何建議如何我可以從我的控制器vue中獲取文件，以便我可以使用此波紋管：

if(!empty($intro_image)) { 
      $uploads_path_image = public_path() . '/storage/uploads/'; 
      $property_default_image_folder = 'property' . $property->id; 
      $orginalImageName = $intro_image->getClientOriginalName(); 
      $imageName = rand(1, 10000) . '.' . $intro_image->getClientOriginalExtension(); 
      $property_image_path = $property_default_image_folder . '/' . $imageName; 
      if (!File::isDirectory($uploads_path_image . $property_default_image_folder)) { 
       File::makeDirectory($uploads_path_image . $property_default_image_folder, 0775, true, true); 
      } 
      $intro_image->move(base_path() . '/public/storage/uploads/' . $property_default_image_folder, $imageName); 

      $property->default_image = $imageName; 
      } 

Answer 1

試試這個：

var formData = new FormData(); 

formData.append('intro_image', this.intro_image); 

this.$http.patch('/profile/'+ user_id +'/property/'+ property_id +'/edit', formData)