文字編輯器artEditor的gitHub地址：https://github.com/baixuexiyang/artEditor

在web端，整合好了artEditor，但是上傳時，總是上傳不成功：

原先後臺程式碼：

前端程式碼：

總是報錯；後臺顯示上傳檔案為空，原來自己想當然是傳的檔案....

正確程式碼(前端把圖片轉成base64編碼，再給後臺)：

後臺：

@PostMapping("/base64Upload")
public String aa(String image){
    System.out.println("上傳圖片==");
    System.out.println("上傳圖片=="+image);
    return image;
}
 

前端：

$(function () {
    "use strict";
    $('#content').artEditor({
        imgTar: '#imageUpload',
        limitSize: 5,   // 兆
        showServer: true,
        uploadUrl: 'http://xxx/image/base64Upload',
        data: {},
        uploadField: 'image',

        breaks: false,
        placeholader: '請輸入文章正文內容',
        validHtml: ["<br/>"],
        formInputId: 'target',
          beforeUpload: function(imgBase64) {
              alert("處理完之後，必須return圖片資料"+imgBase64);
            // 處理完之後，必須return圖片資料   
            return imgBase64;       
          },
        uploadSuccess: function (res) {
            // 這裡是處理返回資料業務邏輯的地方
            // `res`為伺服器返回`status==200`的`response`
            // 如果這裡`return <path>`將會以`<img src='path'>`的形式插入到頁面
            // 如果發現`res`不符合業務邏輯
            // 比如後臺告訴你這張圖片不對勁
            // 麻煩返回 `false`
            // 當然如果`showServer==false`
            // 無所謂咯
            return res;
        },
        uploadError: function (status, error) {
            //這裡做上傳失敗的操作
            //也就是http返回碼非200的時候
            alert('網路異常' + status)
        }
    });
});
注意事項：後臺引數image要和前端引數uploadField：“image”對應，不然接收到為空。

參考文章：https://blog.csdn.net/zmx729618/article/details/78038764