tinymce富文字編輯器如何實現上傳圖片
阿新 • • 發佈:2020-08-07
在專案中,前端會經常使用tinymce富文字編輯器外掛,編輯器有上傳圖片的功能,而對於上傳的這個圖片的處理,有兩種方式:
編輯器中有一個images_upload_handler方法,上傳圖片會觸發該事件,該事件有3個引數,分別是上傳圖片的檔案內容、上傳成功的success處理方法、上傳失敗的failure處理方法。
方式一:上傳圖片時將檔案流給後端,後端返回附件地址
1 images_upload_handler: (blobInfo, success, failure) => { 2 let fd = new FormData(); 3 fd.append("file", blobInfo.blob());4 // 調介面,上傳圖片 5 api.uploadImg(fd).then(response => { 6 // 後端介面返回上傳圖片的訪問地址 7 let result = `${location.origin}/${response}` 8 // 編輯器的上傳圖片內容被處理為<img src="success方法裡面的引數" /> 9 success(result) 10 }) 11 }
方式二:上傳圖片時前端讀取檔案,轉為base64格式,放在img的src中,不需要通過後端
1 images_upload_handler: (blobInfo, success, failure) => { 2 let base64 = "data:image/png;base64," + blobInfo.base64(); 3 //編輯器的上傳圖片內容被處理為<img src="success方法裡面的引數" /> 4 success(base64); 5 }