douzhoulei8959 2019-05-06 23:20
浏览 604
已采纳

Laravel转换base64并以php格式保存

I am using the Croppie script to edit images before uploading to my server.

https://foliotek.github.io/Croppie/

The problem is Croppie encodes the cropped image in a base64 format. I have created a hidden input and attached the base64 string. I need to know how to grab the string so i can decode it and post it with my form.

I have tried so many methods but i am stuck. Any help will be appreciated

Controller

$post = new Post;

        $post->post_category_id = $request->post_category_id;
        $post->title            = $request->title;
        $post->body             = $request->body;
        $post->meta_description = $request->meta_description;
        $post->slug             = $request->slug;
        $post->user_id          = auth()->id();

 $image = $request->input('featimage'); // image base64 encoded
 preg_match("/data:image\/(.*?);/",$image,$image_extension); // extract the image extension
 $image = preg_replace('/data:image\/(.*?);base64,/','',$image); // remove the type part
 $image = str_replace(' ', '+', $image);
 $imageName = 'image_' . time() . '.' . $image_extension[1]; //generating unique file name;
 \Storage::disk('public')->put($imageName,base64_decode($image)


        $post->save();
}

View

 <form class="form-horizontal" action="{{route('posts.store')}}" method="POST" enctype="multipart/form-data">
                  {{ csrf_field() }}            
                     <fieldset>
                        <div class="form-group row"><label class="col-md-2 col-form-label">Title</label>
                           <div class="col-md-10"><input class="form-control" name="title" type="text"><span class="form-text">Please insert a title <small>eg. Exciting new event coming to London</small>
                           </span></div>
                        </div>
                     </fieldset>
                     <fieldset class="">
                        <div class="form-group row"><label class="col-md-2 col-form-label">Category</label>
                           <div class="col-md-10"><select name="post_category_id" class="custom-select custom-select-sm">
                                 @foreach($postCategories as $postCategory)
                                 <option value="{{ $postCategory->id }}">{{ $postCategory->name }}</option>
                                 @endforeach

                              </select></div>
                              </div>
                     </fieldset>
                      <fieldset>
                        <div class="form-group row"><label class="col-md-2 col-form-label">Post Body</label>
                           <div class="col-md-10">
                             <textarea type="textarea" class="form-control" rows="10" name="body"></textarea>
                           </div>
                        </div>
                     </fieldset>
                      <fieldset>
                        <div class="form-group row"><label class="col-md-2 col-form-label">Meta Description</label>
                           <div class="col-md-10">
                             <textarea type="textarea" class="form-control" rows="4" name="meta_description"></textarea>
                           </div>
                        </div>
                     </fieldset>
                      <fieldset>
                       <select name="tags[]" multiple="multiple" class="form-control select2-multi">
                        @foreach($tags as $tag)
                        <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                        @endforeach
                       </select>
                     </fieldset>

               </div>
            </div><!-- END card-->
         </div>
         <div class="col-md-4">
                    <div class="card card-default">
                        <div class="card-header">Featured Image</div>
                            <div class="card-body">
                                <fieldset>
                            <figure>
                            <img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" /></figure>
                             <input type="hidden" id="featimage" name="featimage">

                        </fieldset>
                            <input type="file" class="item-img file center-block" name="upload"/>

                            </label>




                        </div>
                        <div>        

</div>

                  <!-- START card-->
                  <div class="card card-default">
                     <div class="card-header">Slug</div>
                     <div class="card-body">
                        <div class="input-group mb-3">
                                 <div class="input-group-prepend"><span class="input-group-text" id="basic-addon1">www.sixmedia.co.uk/</span></div><input class="form-control" name="slug" type="text" placeholder="slug" aria-label="Username" aria-describedby="basic-addon1">
                              </div>
                     </div>
                  </div><!-- END card-->

                  <!-- START card-->
                  <div class="card card-default">
                     <div class="card-header">Featured</div>
                     <div class="card-body">
                        <div class="col-md-12">
                       <fieldset>

                        <div class="form-group row">
                            @foreach($featured as $feat)

                              <div class="checkbox c-checkbox"><label><input name="featured[]" type="checkbox" value="{{$feat->id}}"><span class="fa fa-check"></span>{{ $feat->name }} </label></div>

                              @endforeach

                        </div>  
                     </fieldset>

                     </div>
                  </div>
                  </div><!-- END card-->
                    <button class="btn btn-primary btn-block" name="submit">Save</button>
                     <button class="btn btn-danger btn-block" name="submit">Cancel</button>

                  </form>

JS

<script type="text/javascript">
    $(".gambar").attr("src", "http://www.pngall.com/wp-content/uploads/2/Upload-PNG-Image-File.png");
                        var $uploadCrop,
                        tempFilename,
                        rawImg,
                        imageId;
                        function readFile(input) {
                            if (input.files && input.files[0]) {
                              var reader = new FileReader();
                                reader.onload = function (e) {
                                    $('.upload-demo').addClass('ready');
                                    $('#cropImagePop').modal('show');
                                    rawImg = e.target.result;
                                }
                                reader.readAsDataURL(input.files[0]);
                            }
                            else {
                                swal("Sorry - you're browser doesn't support the FileReader API");
                            }
                        }

                        $uploadCrop = $('#upload-demo').croppie({
                            viewport: {
                                width: 500,
                                height: 281,
                            },
                            enforceBoundary: false,
                            enableExif: true
                        });
                        $('#cropImagePop').on('shown.bs.modal', function(){
                            // alert('Shown pop');
                            $uploadCrop.croppie('bind', {
                                url: rawImg
                            }).then(function(){
                                console.log('jQuery bind complete');
                            });
                        });

                        $('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
                        $('#cancelCropBtn').data('id', imageId); readFile(this); });
                        $('#cropImageBtn').on('click', function (ev) {
                            $uploadCrop.croppie('result', {
                                type: 'base64',
                                format: 'png',
                                size: {width: 350, height: 200}
                            }).then(function (resp) {
                                $('#item-img-output').attr('src', resp);
                                $('#featimage').attr('src', resp);
                                $('#cropImagePop').modal('hide');
                            });
                        });
                // End upload preview image 

</script>

  • 写回答

1条回答 默认 最新

  • doute3621 2019-05-07 01:45
    关注

    The problem seems to be in your jquery script, you are setting the base64 string as the source of <input type="hidden" id="featimage">

    change this:

    $('#featimage').attr('src', resp);
    

    to this

    `$('#featimage').val(resp);`
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥15 state显示变量是字符串形式,但是仍然红色,无法引用,并显示类型不匹配
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波