Загрузка изображения в Laravel через Ajax - PullRequest
Новая
       16

Загрузка изображения в Laravel через Ajax

0 голосов
/ 25 июня 2019

Я пытаюсь обновить «статью», которая включает заголовок (текст), тело (текстовое поле) и изображение (файл).Все идет хорошо, пока я не попытался осуществить загрузку через ajax.Загрузка изображения через обычный Laravel означает, что он отлично работает, но с ajax я столкнулся с небольшим затруднениемВо-первых, он отказывается проверять файл.Во-вторых, если я закомментирую валидацию для файла в методе контроллера, он будет "вроде как" ... Но тогда проверьте, что $request->hasFile("image") вообще не распознает файл ... поэтому вместо этого пишет в БД по умолчанию ("noimage.jpg ").Другие мои функции ajax работают отлично, только проблемы с обновлением.

Вот функция ajax: 

function ajaksUpdate(){
let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
console.log("hitUpdate");
//console.log();

let updateForm = document.getElementById("updateForm");

let urlId = window.location.href;
let getaArticleId = urlId.lastIndexOf("/");
let articleId = urlId.substring(getaArticleId+1, urlId.length);

let updateFormElements = {};
updateFormElements.title = updateForm.elements[3].value;
updateFormElements.body = CKEDITOR.instances.ckeditor.getData();//Ovo trece po redu je id polja sa ckeditorom.
updateFormElements.image = updateForm.elements[5].files[0];

//console.log();
/*var myformData = new FormData();        
myformData.append('title', updateFormElements.title);
myformData.append('body', updateFormElements.body);
myformData.append('image', updateFormElements.image);
let formData = $('#updateForm').serializeArray();
console.log(updateFormElements);*/
console.log("******");
/*for (var [key, value] of myformData.entries()) { 
    console.log(key, value);
}*/

$.ajax({

    url: '/updateAjax/'+articleId,
    enctype: 'multipart/form-data',
    type: 'POST',
    data: {_token: token , message: "bravo", articleId: articleId, title: updateFormElements.title, body: updateFormElements.body,image:updateFormElements.image},
    dataType: 'JSON',
    /*cache: false,
    contentType: false,
    processData: false,*/
    success: (response) => { 
        console.log("success");
        console.log(response);
    },
    error: (response) => {
        console.log("error");
        console.log(response);
    }
});

}

Вот метод контроллера: 

public function ajaxUpdate(Request $request)
    {

        if($request->ajax()){

            $article = Article::find($request->articleId);

            $validator = \Validator::make($request->all(), [
                "title" => "required",
                "body" => "required",
                'image' => 'image|nullable|max:1999'/*If commented, validation passes.*/
            ]);

            if ($validator->passes()){/*If validation passes, it cannot find 'image'*/
                $hasImage = false;
                //Handle file upload
                if($request->hasFile("image")){
                    $filenameWithExt = $request->file("image")->getClientOriginalName();
                    $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
                    $extension = $request->file("image")->getClientOriginalExtension();
                    $fileNameToStore = $filename."_".time().".".$extension;
                    $path = $request->file("image")->storeAs("public/images", $fileNameToStore);
                }
                else{
                    $fileNameToStore = "noimage.jpg";
                }

                $article->title = $request->input("title");
                $article->body = $request->input("body");
                //$article->user_id = auth()->user()->id;
                $article->image = $fileNameToStore;
                $article->save();


                $response = array(
                    'status' => 'success',
                    'msg' => "Hello!",
                    "request" => $request->all(),
                    "passesValidation" => true,
                    "article" => $article,
                    "hasImage" => $hasImage,
                );

                return response()->json($response);

            }
            else{

                $response = array(
                    'status' => 'success',
                    'msg' => "Hello!",
                    "request" => $request->all(),
                    "passesValidation" => false,
                );
                return response()->json($response);

            }

        }

    }

Edit1:

Если проверка (для изображения) в контроллере не закомментирована, она показывает строку, подобную этой: "C: \ fakepath \ 855d671944d2c143ba672010acd04437.jpg".Json, если не закомментировано: 

{
    msg: "Hello!"
    passesValidation: false
    request:
    articleId: "3"
    body: "posttext"
    image: "C:\fakepath\855d671944d2c143ba672010acd04437.jpg"
    message: "bravo"
    title: "Post1"
    _token: "ZVZ9NDNOcMdgoJgvzYhR9LmrPfh7RfMiM1QJVk9v"
    __proto__: Object
    status: "success"
    __proto__: Object
}

Если закомментировано, json выглядит следующим образом: 

{
    article: {id: 3, title: "Post1", body: "<p><em>Lorem ipsum</em><strong> </strong>dolor sit…ctum. Duis feugiat facilisis lectus a cursus.</p>", created_at: "2019-06-18 00:23:25", updated_at: "2019-06-25 00:18:37", …}
    hasImage: false
    msg: "Hello!"
    passesValidation: true
    request:
    articleId: "3"
    body: "posttext"
    image: "C:\fakepath\855d671944d2c143ba672010acd04437.jpg"
    message: "bravo"
    title: "Post1"
    _token: "ZVZ9NDNOcMdgoJgvzYhR9LmrPfh7RfMiM1QJVk9v"
    __proto__: Object
    status: "success"
    __proto__: Object
}

Edit2:

Iтакже попробовал: 

let formData = new FormData();
formData.append("title", updateFormElements.title);
formData.append("body", updateFormElements.body);
formData.append("image", updateFormElements.image);

и вставил и отправил.Это бросает "Незаконное обращение в ....".И по любой причине, объект formData пуст, когда я его console.log (formData).

Edit3: Даже если я добавлю processData: false, в вызове ajax.Но потом выдает ошибку 419 ...

Edit4:

Я не знаю, поможет ли это, но моя форма модальная, нетКнопка отправки и кнопка с функцией ajaksUpdate () - это тот, кто отправляет / обновляет и находится вне формы.Я обновляю методом put, также получил csrf в модальной форме.

Вот изображение того, как выглядит моя форма / модал:

update_modal

Edit5:

Согласно запросу @pal: мой HTML формируется динамически, в другой функции, которая вызывается при загрузке документа, в блейде раскладок: 

function ajaksShow(){
    let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    console.log("hit");
    //var n = str.lastIndexOf("planet");
    let urlId = window.location.href;
    let getaArticleId = urlId.lastIndexOf("/");
    let articleId = urlId.substring(getaArticleId+1, urlId.length);
    console.log(articleId);

    $.ajax({
        url: '/showAjax',
        type: 'POST',
        data: {_token: token , message: "bravo", articleId: articleId},
        dataType: 'JSON',
        success: (response) => { 
            console.log("success");
            console.log(response);
            let body = "";
            let imageStyle = ";height: 435px; background-position: center top; background-attachment: fixed; background-repeat: no-repeat;background-size:cover;";

            let img = response.article.image;
            let find = " ";
            let rep = new RegExp(find, 'g');
            img = img.replace(rep, "%20"); // class="alert alert-danger"
            let mymodalDelete = "<div class='modal' id='myModalDelete'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><h4 class='modal-title'>Do you really want to delete this article?</h4><button type='button' class='close' data-dismiss='modal'>&times;</button></div><div class='modal-body'>deleting ...</div><div class='modal-footer'><button class='btn btn-outline-danger' style='position: absolute;left:0px; margin-left: 1rem;' onclick='ajaksDelete(this)'>Delete</button><button type='button' class='btn btn-danger' data-dismiss='modal'>Close</button></div></div></div></div>";

            let updateForm = "<form method='POST' id='updateForm' enctype='multipart/form-data'><input type='hidden' name='_method' value='PUT'><input type='hidden' name='_token' value='"+token+"'><input id='' type='hidden' name='article_id' value='"+response.article.id+"' /><div class='form-group'><label class='label' for='title'>Title</label><input type='text' class='form-control' name='title' placeholder='Title' value='"+response.article.title+"' required></div><div class='form-group'><label for='body'>Body</label><textarea class='form-control' id='ckeditor' name='body' placeholder='Body' required>"+response.article.body+"</textarea></div><div class='form-group'><input type='file' name='image' id='image'></div></form>";
            let mymodalUpdate = "<div class='modal' id='myModalUpdate'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><h4 class='modal-title'>Do you really want to update this article?</h4><button type='button' class='close' data-dismiss='modal'>&times;</button></div><div class='modal-body'>"+updateForm+"</div><div class='modal-footer'><button class='btn btn-outline-success' style='position: absolute;left:0px; margin-left: 1rem;' onclick='ajaksUpdate()'>Update</button><button type='button' class='btn btn-info' data-dismiss='modal'>Close</button></div></div></div></div>";

            let imageUrl = "/storage/images/"+img;
            let html = "<a href='/list' class='btn btn-outline-info btn-sm'>Go Back</a><div class='nextPrev'><a href='/list/"+response.prev+"' class='btn btn-outline-success'><i class='fas fa-arrow-left'></i></a><a href='/list/"+response.next+"' class='btn btn-outline-info'><i class='fas fa-arrow-right'></i></a></div><br><br><div id='single-kv' style='background-image: url("+imageUrl+")"+imageStyle+";background-color: red !important;'></div><div id='single-intro'><div id='single-intro-wrap'><h1> "+response.article.title+"</h1>";

                if(response.article.body.length > 400){
                    body = response.article.body.substring(0, 400)+"<a id='readMore' href='/list/"+response.article.id+"'>...Read more</a>";
                }
                else{
                    body = response.article.body;
                }

                html += body;

                html += "<div class='comment-time excerpt-details' style='margin-bottom: 20px; font-size: 14px;'><a href='#gotoprofil'> "+response.user.name+" </a> - "+response.article.created_at+"</div><button id='update' class='btn btn-outline-info btn-sm float-left' data-toggle='modal' data-target='#myModalUpdate' onclick='getCkEditor()'>Update</button><button class='btn btn-outline-danger btn-sm float-right' data-toggle='modal' data-target='#myModalDelete'>Delete</button></div></div><br><hr style='color:whitesmoke; width: 50%;'><div id='single-body'><div id='single-content'>"+response.article.body+"</div></div>"+mymodalDelete+mymodalUpdate;


            if(document.getElementById("maine")){

                document.getElementById("maine").innerHTML = html;

            }

        },
        error: (response) => {
            console.log("error");
            console.log(response);
        }
    }); 

}

Форма - это переменная updateForm, а кнопка, которая ее активирует, находится в переменной mymodalUpdate, где она вызывает функцию ajaksUpdate ().Также updateForm связан в mymodalUpdate с двумя плюсами на каждой стороне.

Edit6: Я также пробовал: 

let formData = $('#updateForm').serializeArray();
console.log(formData);

, но он показывает только csrf, скрытый метод put field, токен, поле заголовка и тела.Нет поля для файла?.

Edit7:

Вот два рисунка, которые (я надеюсь) помогут проиллюстрировать мою точку зрения:

csrf1 и второй csrf2

Edit8:

Кто-то предположил, что это было несовпадение csrf относительно ошибки 419, поэтомуони предложили временно отключить csrf, чтобы увидеть, что к чему, вот фото:

Зарегистрированное и промежуточное ПО: loggedandmiddleware

и метод регистрации и контроллера: loggedandcontrollermethod

Обновлено с изменением функции AJAX.Если я добавлю к вызову ajax 

cache: false,
contentType: false,
processData: false,

, то он покажет: «POST http://articleapp.test/updateAjax/3 419 (неизвестный статус)» ошибка.Если прокомментировать эти три строки, появится сообщение об ошибке «Uncaught TypeError: Недопустимый вызов при добавлении ...».Я перепробовал все.и CSRF не потому, что я пытался отключить, он отправляет пустой запрос.

Окончательное редактирование: Я не знаю, что я сделал, но загрузка файла работает.Вот функция ajax: 

function ajaksUpdate(){
    let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    console.log("hitUpdate");
    //console.log();

    let updateForm = document.getElementById("updateForm");

    let urlId = window.location.href;
    let getaArticleId = urlId.lastIndexOf("/");
    let articleId = urlId.substring(getaArticleId+1, urlId.length);

    let updateFormElements = {};
    updateFormElements.title = updateForm.elements[3].value;
    updateFormElements.body = CKEDITOR.instances.ckeditor.getData();//Ovo trece po redu je id polja sa ckeditorom.
    updateFormElements.image = updateForm.elements[5].files[0];

    let imginp = document.getElementById("imagex").files;
    //console.log(imginp);

    var myformData = new FormData();        
    myformData.append('title', updateFormElements.title);
    myformData.append('body', updateFormElements.body);
    myformData.append('image', updateFormElements.image);
    myformData.append('_token', token);
    myformData.append('articleId', articleId);
    //let formData = $('#updateForm').serializeArray();

    console.log("******");
    for (var [key, value] of myformData.entries()) { 
        console.log(key, value);
    }
    console.log("======");

    $.ajax({

        url: '/updateAjax/'+articleId,
        enctype: 'multipart/form-data',
        type: 'POST',
        data: myformData,
        dataType: 'JSON',
        cache: false,
        contentType: false,
        processData: false,
        success: (response) => { 
            console.log("success");
            console.log(response);
        },
        error: (response) => {
            console.log("error");
            console.log(response);
        }
    }); 

}

Вот метод контроллера: 

public function ajaxUpdate(Request $request)
    {

        if($request->ajax()){

            $article = Article::find($request->articleId);

            $validator = \Validator::make($request->all(), [
                "title" => "required",
                "body" => "required",
                'image' => 'image|nullable|max:1999'
            ]);

            if ($validator->passes()){
                $hasImage = false;
                //Handle file upload
                if($request->hasFile("image")){
                    $filenameWithExt = $request->file("image")->getClientOriginalName();
                    $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
                    $extension = $request->file("image")->getClientOriginalExtension();
                    $fileNameToStore = $filename."_".time().".".$extension;
                    $path = $request->file("image")->storeAs("public/images", $fileNameToStore);
                }
                else{
                    $fileNameToStore = "noimage.jpg";
                }

                $article->title = $request->input("title");
                $article->body = $request->input("body");
                //$article->user_id = auth()->user()->id;
                $article->image = $fileNameToStore;
                $article->save();

                $response = array(
                    'status' => 'success',
                    'msg' => "Hello!",
                    "request" => $request->all(),
                    "passesValidation" => true,
                    "article" => $article,
                    "hasImage" => $hasImage,
                );

                return response()->json($response);

            }
            else{

                $response = array(
                    'status' => 'success',
                    'msg' => "Hello!",
                    "request" => $request->all(),
                    "passesValidation" => false,
                );
                return response()->json($response);

            }

        }

    }

Просто хочу оставить это здесь для потомков и спросить других: сталкивались ли вы когда-нибудь с проблемой, которая чудесным образом решена, но вы не были мудрее в отношении решения, каким бы оно ни было?

Ответы [ 3 ]

0 голосов
/ 25 июня 2019

Вместо этого 

let formData = new FormData();
formData.append("title", updateFormElements.title);
formData.append("body", updateFormElements.body);
formData.append("image", updateFormElements.image);

используйте это 

var formData = new FormData(this);

Полный исходный код, как показано ниже, как вы генерируете из динамически Пожалуйста, проверьте это привязка события

просто дайте кнопку вот так: Отправить Кнопка вне от может быть частью от проверить эту кнопку вне формы 

<script>

    $(document).ready(function (e) {

      $('#updateBtn').on('submit',(function(e) {

        $.ajaxSetup({

          headers: {

             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

             }

            });

         e.preventDefault();

          var formData = new FormData(this);

           $.ajax({

                 type:'POST',

                  url: "{{ url('save-image')}}",

                  data:formData,

                  success:function(data){ },

                  error: function(data){}

            });

          }));

         });

0 голосов
/ 25 июня 2019

Чтобы загрузить файл с помощью ajax, попробуйте это: 

var fileData = $('#id_of_file').prop('files')[0];

var formData = new FormData();  // Create formdata object
formData.append('fileData', fileData);  // append key: value pair in it
formData.append('key1', value1);
formData.append('key2', value2);

и используйте его в ajax, например: 

$.ajax({
    url: $('meta[name="route"]').attr('content') + '/ur_route',
    method: 'post',
    data: formData,
    contentType : false,
    processData : false,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    success: function(response){
        // do whatever you want
    }
});

на стороне сервера (контроллер), вы получите файл с помощью fileData индекс.

0 голосов
/ 25 июня 2019

Что ж, похоже, вы загружаете локальный путь к своему изображению вместо самого изображения в методе Ajax.Чтение этой части документации MDN Я понял, что вы могли бы написать это: 

updateFormElements.image = updateForm.elements[5].files[0];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...