无法上传Laravel上的图像

Question

我有一个HTML上传多个图像。

我试图进行调试，并且它为我上传的所有图像返回代码200。

我的代码可能太多了，差不多要用功能拖动图片来排序。但我仍然保留所有代码。

我不知道我的错误从哪里开始？

它也运行到success: function并显示吐司消息：Sweet Success。

但它显示控制台日志错误，如：GET http://localhost:8000/storage/apartments/JnJfDtTx2ix3W7z8J6PDCD4JskK0WZBWLrkSnUHW.jpeg 404 (Not Found)

这里是所有的代码来做到这一点：

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

和JavaScript代码：

@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

的URL你使用似乎不正确。你不应该直接访问storage。您的文件最终projects/apartments下，这样你就可以将URL更改为：在URL中，而不是`/存储/ apartments`

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