Vue/Laravel - 在更新上传文件不起作用

Question

我有一个组件可以在创建表单上工作，但不能在更新表单上工作。图像被显示在更新的形式，但是当我试图把它上传，在后台，我没有得到任何文件领域'image'

这是组件：

<template> 
<div> 
    <div v-if="!image"> 
    <h2>Select an image</h2> 
    <input type="file" @change="onFileChange"> 
    </div> 
    <div v-else> 
    <img :src="image" /> 
    <input type="file" name="image" style="display:none"> 
    <button @click="removeImage">Remove image</button> 
    </div> 
</div> 
</template> 

<script> 
export default { 
    props: { 
     image: { 
      type: String, 
      default: "" 
     } 
    }, 
    data() { 
     return { 
     formData:new FormData(), 
     file: null 
     } 
    }, 
    methods: { 
     onFileChange: function onFileChange(e) { 
      var files = e.target.files || e.dataTransfer.files; 
      if (!files.length) 
       return; 
      this.createImage(files[0]); 
      this.formData.append('file', files[0]); 
      this.file = files[0]; 
     }, 
     createImage: function createImage(file) { 
      var image = new Image(); 
      var reader = new FileReader(); 
      var vm = this; 
      reader.onload = function (e) { 
       vm.image = e.target.result; 
      }; 
      reader.readAsDataURL(file); 
     }, 
     removeImage: function removeImage(e) { 
      this.image = ''; 
     } 
    } 
} 
</script> 

而且这就是我把它在创建视图：

<image-upload></image-upload> 

这是为更新视图：

<image-upload image="/uploads/{{ $magazine->image }}"></image-upload> 

但是，当我在我的控制器的更新功能dd($request->all())我得到这样的输出：

array:8 [▼ 
    "_method" => "PUT" 
    "_token" => "oNkMAyKsKsxOpqeonRDvyusqtFrfVgBEQOnyNrFw" 
    "image" => "1.png" 
    "name" => "Article name" 
    "summary" => "" 
    "visual_id" => "" 
    "spid_id" => "" 
    "files" => "1" 
] 

而且对于创建功能，其中它的实际工作，我得到：

array:6 [▼ 
    "_token" => "oNkMAyKsKsxOpqeonRDvyusqtFrfVgBEQOnyNrFw" 
    "name" => "Article name" 
    "summary" => "" 
    "visual_id" => "" 
    "spid_id" => "" 
    "image" => UploadedFile {#222 ▶} 
] 

这是形式：

{!! Form::model($magazine, ['method' => 'PUT', 'route' => ['magazines.update', 'id' => $magazine->id, 'files' => true]]) !!} 
<div class="row magasin-form large-6 large-offset-3 columns"> 

    <ul class="tabs"> 
     <li class="tabs-title is-active"><a href="{{ url('/admin/magazines') }}" aria-selected="true">Tilbake</a></li> 
    </ul> 

    <div class="tabs-content"> 
     <div class="tabs-panel is-active"> 
      @section('errors') 
       @include('layouts.partials.errors') 
      @show 
      <p>Redigere</p> 

      <div class="row"> 
       <div class="large-12 columns"> 
        <label>Navn 
         {!! Form::text('name', $magazine->name, ['placeholder' => 'Navn']) !!} 
        </label> 
       </div> 
      </div> 

      <image-upload image="/uploads/{{ $magazine->image }}"></image-upload> 

      <div class="row"> 
       <div class="large-12 columns"> 
        <label>Visual ID 
         {!! Form::text('visual_id', $magazine->visual_id, ['placeholder' => 'Visual id']) !!} 
        </label> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="large-12 columns"> 
        <label>Spid ID 
         {!! Form::text('spid_id', $magazine->spid_id, ['placeholder' => 'spid id']) !!} 
        </label> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="large-12 columns"> 
        <label>Summary 
         {!! Form::textarea('summary', $magazine->name) !!} 
        </label> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="large-6 columns"> 
        {!! Form::submit('Lagre', ['class'=> 'secondary button']) !!} 
       </div> 
       <div class="large-6 columns"> 
        <a class="secondary hollow button" href="{{ route('magazines.index')}}">Avbryte</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
{!! Form::close() !!} 

更新

我也曾尝试与改变我的组件添加到这个：

<template> 
    <div class="Image-input"> 
     <div class="Image-input__input-wrapper"> 
      <h2>+</h2> 
      <input @change="previewThumbnail" class="Image-input__input" name="thumbnail" type="file"> 
     </div> 

     <div class="Image-input__image-wrapper"> 
      <i v-show="! imageSrc" class="icon fa fa-picture-o"></i> 
      <img v-show="imageSrc" class="Image-input__image" :src="imageSrc"> 
     </div> 
    </div> 
</template> 
<script> 
export default { 

    props: ['imageSrc'], 

    methods: { 
    previewThumbnail: function(event) { 
     var input = event.target; 

     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     var vm = this; 

     reader.onload = function(e) { 
      vm.imageSrc = e.target.result; 
     } 

     reader.readAsDataURL(input.files[0]); 
     } 
    } 
    } 
} 
</script> 

但我得到相同的输出我的更新表单。

Answer 1

它看起来像你不小心传递files boolean值以route阵列代替。尝试更新您的表格开放到：

{!! Form::model($magazine, ['method' => 'PUT', 'route' => ['magazines.update', 'id' => $magazine->id], 'files' => true]) !!} 

Answer 2

你输入字段没有命名，那么这可能是为什么形式不会把它捡起来

不知道为什么要修改的FORMDATA。任何你不能提交<input>的表单而不是提取它的原因？

尝试向我们展示的形式看起来如何，你把你的图像上传组件的地方