Summernote上傳不起作用

Question

我在夏季筆記jquery插件中的onImageUpload無法正常工作。 要在其他文件夾中的其他位置上傳圖像，然后在summernote默認位置上傳該圖片？

index.php

<textarea id="summernote" name="contents"></textarea>

<script>
    $('#summernote').summernote({
        tabsize: 2,
        height: 200,
        focus: true,
        callbacks: {
            onChange: function(contents, $editable) {
                console.log('onChange:', contents, $editable);
            }
        }
    });

    $('#summernote').on('summernote.image.upload', function(we, contents, $editable) {
        data = new FormData ();

        data.append("file",file);

        $.ajax({
            url: "summernote_upload.php",
            type: "POST",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
        });

        $summernote.summernote('insertNode', imgNode);
    });
</script>

summernote_upload.php

require_once ('./../../lib/curl_setup.php'); // curl json&token

$data_array = array(
    "request" => array(
        "image" => "this upload file/base64"
    ),
);
$make_call = callAPI('POST', '/api/v2/admin/products/images', json_encode($data_array));

$response = json_decode($make_call, true);

//$errors   = $response['response']['errors'];
//$data     = $response['response']['data'][0];

print_r($response);exit;

但是， summernote_upload.php效果很好。 響應為：

{
    "image": {
        "shop_no": 1,
        "path": "/web/upload/NNEditor/20180408/b69c819e36b4abc3f393b731829ab747.gif"
    }
}

我需要解決index.php 。

Answer 1

首先，您必須捕獲上載圖像事件，並且不允許summernote自動添加它

        callbacks: {
               onImageUpload: function(files, editor, $editable) {
                   console.log('onImageUpload');
                   sendFile(files[0],editor,$editable);
        }},

那么您必須自己使用json處理圖片上傳。 為此有一個功能：

   function sendFile(file,editor,welEditable) {
      data = new FormData();
      data.append("file", file);
       $.ajax({
       url: "uploader.php",
       data: data,
       cache: false,
       contentType: false,
       processData: false,
       type: 'POST',
       success: function(data){
      // alert(data);
        $('#summernote10').summernote("insertImage", data, 'filename');
    },
       error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus+" "+errorThrown);
      }
    });
   }

在服務器端，您可以保存文件

$allowed = array('png', 'jpg', 'gif','jpeg');
if(isset($_FILES['file']) && $_FILES['file']['error'] == 0){
    $extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
    if(!in_array(strtolower($extension), $allowed)){
        echo '{"status":"error"}';
        exit;
    }
    $newFileAddress = '../files/-'.rand(1000).'.'.$extension;
    if(move_uploaded_file($_FILES['file']['tmp_name'],$newFileAddress)){
     echo $newFileAddress;
     exit;
    }
}

通過返回服務器上的文件路徑，您可以輕松地將其插入夏季筆記