无法在Laravel上传图像

Question

I have an HTML to upload multiple images.

I tried to debug and it return code 200 for all image I uploaded.

My code can be too much, almost for feature drag image to sort. But I still keep all code.

I don't know where my bug start from?

It also run to success: function and show toast message: Sweet Success.

But it show error in console log like: GET http://localhost:8000/storage/apartments/JnJfDtTx2ix3W7z8J6PDCD4JskK0WZBWLrkSnUHW.jpeg 404 (Not Found)

Here is all code to do this:

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

And 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

The URL you're using seems incorrect. You shouldn't be accessing storage directly. Your files end up under projects/apartments, so you can change the URL to:

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