前言：最近項目上需要使用富文本編輯器，覺得tinymce很不錯就用了，具體怎么在項目中使用參考
【vue】 vue2 中使用 Tinymce 富文本編輯器
【vue】 Tinymce 數據 回顯問題 | 第一次正?；仫@后面，顯示空白bug不能編輯

這兩天又遇到了新的問題，圖片上傳后是看地址欄發(fā)現是base64的，就是下面這樣的，

總體來說呢，這樣也沒有問題，畢竟圖片顯示了。但是多個圖片上傳就會導致響應體太大（后端響應太慢，優(yōu)化時發(fā)現是base64圖片太大），所以就想要直接放個鏈接回顯，下面這樣

如何實現？找了很多文章，參考了很長時間終于弄好了，總結一下。
簡介與入門 \ 上傳圖片和文件
vue—tinymce粘貼圖片【完美解決】
插件 \ paste 粘貼插件
gitee-wpspaster
tinymce 實現 粘貼圖片自動上傳

下面具體操作：

我就基于我之前使用tinymce基礎上修改了，

第一步：配置粘貼【paste】具體配置項

tinymce.init({
  selector: '#tinydemo',
  plugins: 'paste',
  toolbar: 'paste',
  paste_data_images: true // 默認是false的，記得要改為true才能粘貼
})

第二步：配置圖片上傳函數

images_upload_handler: (blobInfo, success, failure) => {
  var xhr, formData;
  var file = blobInfo.blob(); //轉化為易于理解的file對象
  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  // 圖片上傳路由
  xhr.open("POST", process.env.VUE_APP_BASE_API + "/common/upload");
  xhr.onload = () => {
    var json;
    if (xhr.status != 200) {
      // failure("上傳失敗: " + xhr.status);
      return;
    }
    json = JSON.parse(xhr.responseText);
    // json是后端返回的數據，其中就包含鏈接
    if (!json || typeof json.location != "string") {
      // failFun("上傳成功：");
      // succFun(json.url);
      success(process.env.VUE_APP_BASE_API + json.fileName);
      return;
    }
  };
  formData = new FormData();
  formData.append("file", file, file.name); //此處與源文檔不一樣
  xhr.setRequestHeader("Authorization", "Bearer " + getToken());
  xhr.send(formData);
},

下面這段代碼是完成系統驗證的，可以根據項目調整，不需要可以不加
xhr.setRequestHeader("Authorization", "Bearer " + getToken());

至此，圖片渲染就是鏈接形式了。文章來源地址http://www.zghlxwxcb.cn/news/detail-623243.html

到了這里，關于【vue】 Tinymce 富文本編輯器 不想讓上傳的圖片轉換成base64，而是鏈接的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！