Vue/Laravel-更新时上传文件不起作用 [英] Vue/Laravel - uploading a file on update doesn't work

问题描述

我有一个可以在创建表单上工作的组件，但不能在更新表单上工作.该图像正在更新表单中显示，但是当我尝试上传它时，在后端，我没有获得字段'image'

I have a component that works on create form, but not on an update form. The image is being shown in the update form, but when I try to upload it, in the backend, I don't get any file for the field '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>

这是我在创建视图中的称呼方式:

And this is how I call it in the create view:

<image-upload></image-upload>

这是用于更新视图的

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

但是，当我在控制器的更新功能中执行dd($request->all())时，会得到以下输出:

But, when I do dd($request->all()) in the update function in my controller I get this output:

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

对于实际起作用的create函数，我得到了:

And for the create function where it actually works I get:

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() !!}

已更新

我也尝试过将组件更改为此:

I have also tried with changing my component to this:

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

但是在更新时，我的表单会得到相同的输出.

But I get the same output for my form on update.

推荐答案

您似乎不小心将files布尔值传递给了route数组.尝试将表单的开头更新为:

It looks like you're accidentally passing the files boolean to the route array instead. Try updating your form opening to:

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

这篇关于Vue/Laravel-更新时上传文件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！