Question

“”我正在尝试使用tinyMce上传图像，但始终出现混合内容错误，我知道这是因为它试图使用'http：//'而不是https：//进行api调用，问题是不知道在哪里解决此问题。”我已经尝试了所有我能想到的一切，请对laravel和vue陌生，这是我第一次使用tinymce编辑器。这是错误消息： “混合内容：位于'https://bizguruh.com/admin/add/product/117/ARTICLES'的页面是通过HTTPS加载的，但是请求了不安全的XMLHttpRequest端点'http://bizguruh.com/api/image-upload'。该请求已被阻止；该内容必须通过HTTPS进行服务。”

<app-editor 
                     :init="{
                         plugins: 'advlist autolink lists link image imagetools charmap print preview anchor textcolor insertdatetime media table paste code help wordcount',

                             toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat |image help',
                             image_title: true,

                        height: 300,


                        images_upload_url: '/api/image-upload/',

                        file_picker_types: 'image',
                        automatic_uploads:false,
                        relative_urls:false,
                       convert_urls:false,
                        file_picker_callback:function(callback, value, meta) {
                              loadFile(callback, value)        

                    }, }" class="form-control" v-model="product.articles.description">
                    </app-editor>

 loadFile(cb,mt){
              if (mt.filetype === 'image') {
                              let up = this.$refs.upload


                          up.onchange = function() {
                        let file = this.files[0];
                        let reader = new FileReader();
                        reader.onload = (e)=> {
                           let id = 'blobid' + (new Date()).getTime();
                            let blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                            let base64 = reader.result.split(',')[1];
                            let blobInfo = blobCache.create(id, file, base64);
                            blobCache.add(blobInfo);

                     /* call the callback and populate the Title field with the file name */
                        cb(blobInfo.blobUri(), { title: file.name });
                        };
                        reader.readAsDataURL(file);
                        }

                        up.click()


                    }



   public function imageUpload(Request $request){

       $file = $request->file('file');


      $path= url('images/').'/'.$file->getClientOriginalName();
    $imgpath = $file->move(public_path('images/'),$file->getClientOriginalName());
    $fileNameToStore = $path;

    return json_encode(['location' => $fileNameToStore]); 
 }

Answer 1

替换

images_upload_url: '/api/image-upload/'

使用

images_upload_url: '{{ secure_url('api/image-upload') }}'

它将强制产生secured URL。

$path= secure_url('images/').'/'.$file->getClientOriginalName();

如何避免尝试上传图像的混合内容

1 个答案: