简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Laravel utilise ajax pour soumettre ce formulaire. Comment le code du contrôleur doit-il être écrit ?
phpcn_u1582
phpcn_u1582 2017-05-16 16:54:07
0
2
509

Utilisez ajax pour soumettre un ensemble de formulaires contenant une image.
À l'origine, lors de la soumission sans ajax, elle peut être enregistrée avec succès dans la base de données
Mais comme l'image doit être compressée avant le téléchargement, elle est modifiée en soumission ajax. . La requête ajax est envoyée avec succès, mais elle ne peut pas être enregistrée dans la base de données,
Je pense qu'il se peut que le code dans le contrôleur doive être modifié, mais je ne sais pas comment.
ps : Le plug-in localResizeIMG est utilisé pour compresser les images. https://github.com/think2011/localResizeIMG

Voici la vue de la soumission du formulaire en utilisant ajax : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>

<p class="container">
    <fieldset class="form-group">
        <label for="title">标题</label>
        <input type="text" class="form-control" id="title" placeholder="">
    </fieldset>
    <fieldset class="form-group">
        <label for="content">内容</label>
        <textarea class="form-control" id="content" rows="3"></textarea>
    </fieldset>
    <fieldset class="form-group">
        <label for="photo">图片</label>
        <input type="file" name="file" accept="image/*" class="form-control-file" id="photo">
        <img id="preview"/>
    </fieldset>
    <a id="submit" class="btn btn-primary">提交</a>
</p>

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"
        integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
        crossorigin="anonymous"></script>

//用了localResizeIMG插件，用于上传图片前先压缩。https://github.com/think2011/localResizeIMG
<script src="js/dist/lrz.all.bundle.js"></script>
<script>
    $(function () {
        var $preview = $('#preview');
        var formData = null;

        $('#photo').on('change', function () {
            lrz(this.files[0], {
                width: 800
            }).then(function (rst) {
                $preview.attr('src', rst.base64);
                rst.formData.append('fileLen', rst.fileLen);
            });
        });

        $("#submit").click(function (rst) {
            $.ajax({
                type: "POST",
                url: "article/",
                dataType: 'json',
                cache: false,
                data: {
                    title: $("#title").val(),
                    content: $("#content").val(),
                    photo: rst.formData
                }
            }).done(function (msg) {
                alert("done: " + msg);
            }).fail(function (jqXHR, textStatus) {
                alert("fail: " + textStatus);
            });
        });
    });
</script>
</body>
</html>

Ce qui suit est le contrôleur d'origine lorsque ajax n'a pas été utilisé. Il peut être enregistré avec succès dans la base de données. Maintenant, je ne sais pas comment le modifier. 

       public function store(Requests\StoreArticleRequest $request)
    {
        $article = new Article($request->except('photo'));
        $article -> user_id = \Auth::id();

        $file = $request->file('photo');
        $destinationPath = 'uploads/';
        $extension = $file->getClientOriginalExtension();
        $fileName = \Auth::user()->id . '_' . time() . '.' . $extension;
        $file->move($destinationPath, $fileName);
        $article -> photo = '/'.$destinationPath.$fileName;

        $article->save();

        return redirect()->action('ArticleController@show', ['id' => $article->id]);
    }

Ce qui suit est StoreArticleRequest

   public function rules()
    {
        return [
            'title'=>'required',
            'content'=>'required',
            'photo'=>'image'
        ];
    }
phpcn_u1582
phpcn_u1582

répondre à tous(2)
巴扎黑
巴扎黑2017-05-16 16:56:07 2 plancher

save 前你先 dd 下 $article Jetez un œil aux données

Comme +0
Ajouter une réponse
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-16 16:56:07 1 plancher

N'oubliez pas csrf et ajax lors de la soumission.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！