Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/laravel/11.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Laravel 如何在vue.js中处理图像文件?_Laravel_Laravel 5_Laravel 5.2_Vue.js - Fatal编程技术网

Laravel 如何在vue.js中处理图像文件?

Laravel 如何在vue.js中处理图像文件?,laravel,laravel-5,laravel-5.2,vue.js,Laravel,Laravel 5,Laravel 5.2,Vue.js,我认为: <input type="file" @change="onFileChange"> onFileChange:function(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]);

我认为:

  <input type="file" @change="onFileChange">
 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;
          }
试试这个:

var formData = new FormData();

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

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