Das Bild kann nicht auf Laravel hochgeladen werden

Question

Ich habe einen HTML-Code, um mehrere Bilder hochzuladen.

Ich habe versucht zu debuggen und es gibt Code 200 für alle Bilder, die ich hochgeladen habe.

Mein Code kann zu viel sein, fast für Feature ziehen Bild zu sortieren. Aber ich behalte immer noch den ganzen Code.

Ich weiß nicht, wo mein Fehler von beginnen?

Es läuft auch zu success: function und Toast-Nachricht anzeigen: Sweet Success.

Aber zeigen Sie es Fehler in der Konsole ist wie: GET http://localhost:8000/storage/apartments/JnJfDtTx2ix3W7z8J6PDCD4JskK0WZBWLrkSnUHW.jpeg 404 (Not Found)

Hier werden alle Code ist, dies zu tun:

<form role="form" action="" method="POST" enctype="multipart/form-data"> 
    <!-- Images Tab --> 
    <div role="tabpanel" class="tab-pane" id="images"> 
     <button class="btn btn-primary" type="button" id="upload"><i class="voyager-upload"></i> 
      Upload image 
     </button> 
     <div id="uploadPreview" style="display:none;"></div> 

     <div id="uploadProgress" class="progress active progress-striped" style="display:none;"> 
      <div class="progress-bar progress-bar-success" style="width: 0%"></div> 
     </div> 
     <div class="apartment-images"> 
      <div class="row" id="sort-image"> 
       <div class="col-xs-6 col-md-3 col-lg-2 draggable" v-for="(index, path) in files"> 
        <div class="apartment-image"> 
         <img :src="path" class="img-responsive"> 
         <input type="hidden" name="images[]" :value="path"> 
         <div class="row"> 
          <div class="col-xs-6"><span v-if="index == 0">Main image</span></div> 
          <div class="col-xs-6 text-right"><button type="button" v-on:click="remove(index)" class="btn btn-default"><i class="voyager-trash"></i> Delete</button></div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 

    <!-- CSRF TOKEN --> 
    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
    <br> 
    <div class="panel-footer"> 
     <button type="submit" class="btn btn-success">Save Data</button> 
    </div> 
</form> 

<iframe id="form_target" name="form_target" style="display:none"></iframe> 
<form id="my_form" action="{{ route('voyager.upload') }}" target="form_target" method="post" 
     enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden"> 
    <input name="image" id="upload_file" type="file" onchange="$('#my_form').submit();this.value='';"> 
    <input type="hidden" name="type_slug" id="type_slug" value="{{ $dataType->slug }}"> 
    <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
</form> 

Und Javascript-Code:

@section('javascript') 
<script> 
    $('document').ready(function() { 
     var apartment_images = []; 

     @if(isset($apartment->slider_images)) 
      apartment_images = <?php echo json_encode(old('slider_images', $apartment->slider_images)) ?>; 
     @elseif(old('slider_images')) 
      apartment_images = <?php echo json_encode(old('slider_images')); ?>; 
     @endif 

     var manager = new Vue({ 
      el: '.apartment-images', 
      data: { 
       files: apartment_images 
      }, 
      ready: function() { 
       var vm = this; 
       var list = document.getElementById("sort-image"); 
       Sortable.create(list, { 
        draggable: '.draggable', 
        onUpdate: function(evt) { 
         vm.reorder(evt.oldIndex, evt.newIndex); 
        } 
       }); 
      }, 
      methods: { 
       reorder(oldIndex, newIndex) { 
        // move the item in the underlying array 
        this.files.splice(newIndex, 0, this.files.splice(oldIndex, 1)[0]); 
       }, 
       remove: function(index) { 
        this.files.splice(index, 1); 
       } 
      } 
     }); 

     CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
     //var imageWidth = 762, imageHeight = 1100; 
     $("#upload").dropzone({ 
      url: "{{ route('voyager.media.upload') }}", 
      previewsContainer: "#uploadPreview", 
      totaluploadprogress: function (uploadProgress, totalBytes, totalBytesSent) { 
       $('#uploadProgress .progress-bar').css('width', uploadProgress + '%'); 
       if (uploadProgress == 100) { 
        $('#uploadProgress').delay(1500).slideUp(function() { 
         $('#uploadProgress .progress-bar').css('width', '0%'); 
        }); 
       } 
      }, 
      acceptedFiles: ".jpeg,.jpg,.png,.gif", 
      processing: function() { 
       $('#uploadProgress').fadeIn(); 
      }, 
      sending: function (file, xhr, formData) { 
       formData.append("_token", CSRF_TOKEN); 
       formData.append("upload_path", 'public/apartments'); 
       console.log(file); 
      }, 
      success: function (e, res) { 
       if (res.success) { 
        manager.files.push('/storage/' + res.path); 
        toastr.success(res.message, "Sweet Success!"); 
       } else { 
        toastr.error(res.message, "Whoopsie!"); 
       } 
      }, 
      error: function (e, res, xhr) { 
       toastr.error(res, "Whoopsie"); 
      }, 
      queuecomplete: function() { 
       //getFiles(manager.folders); 
      } 
     }); 
    }); 
</script> 
@stop 

Answer 1

Die URL Sie verwenden scheint falsch zu sein. Sie sollten nicht direkt auf storage zugreifen. Ihre Dateien am Ende unter projects/apartments, so dass Sie die URL ändern können:

http://localhost:8000/apartments/JnJfDtTx2ix3W7z8J6PDCD4JskK0WZBWLrkSnUHW.jpeg