若以框架 vue富文本字符串中获取图片的存储路径

若依的富文本

字符串是上述格式

我们要获取以下格式 (就是图片的存储路径)
有几个步骤
第一步
main.js中添加两行代码

import axios from 'axios'
Vue.prototype.$axios= axios

第二步
Edit包下增加 以下代码

<div class="editor" ref="editor" :style="styles" @paste="onPaste($event)"></div>
具体是这个代码
@paste="onPaste($event)"

(1)
methods中增加

/**监听富文本编辑器的粘贴事件  针对图片进行操作 */
     onPaste(evt) {
      // 获取解析 粘贴的内容
      //先判断粘贴的内容是否是图片
      if (
              evt.clipboardData &&
              evt.clipboardData.files &&
              evt.clipboardData.files.length
          ) {
              evt.preventDefault();
              [].forEach.call(evt.clipboardData.files, (file) => {
                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                      return;
                  }
                  const formData = new FormData();
                  formData.append("file", file);
                  //带请求头过验证
                  const config = {
                    headers:{
                      "Authorization": "Bearer " + getToken()
                    }
                  };
                  this.$axios.post(`${process.env.VUE_APP_BASE_API}/common/upload`, formData,config).then(
                      res => {
                        console.log(res);
                          if (res.data.code == 200) {
                              console.log(res.data.fileName)
                              let length = this.Quill.getSelection().index; //光标位置
                              // 插入图片地址
                              this.Quill.insertEmbed(length, "image", res.data.url);
                              // 光标后移一位
                              this.Quill.setSelection(length + 1);
                          } else {
                              this.$message({
                                  message: res.data.message,
                                  type: 'warning'
                              });
                          }
                      })
              });
          }
    },

字符串为这种格式

<p><img src=\"http://localhost:8080/profile/upload/2023/06/09/image_20230609142821A006.png\"></p>

(2)methods中增加

 /**监听富文本编辑器的粘贴事件  针对图片进行操作 */
    onPaste(evt) {
      // 获取解析 粘贴的内容
      //先判断粘贴的内容是否是图片
      if (
              evt.clipboardData &&
              evt.clipboardData.files &&
              evt.clipboardData.files.length
          ) {
              evt.preventDefault();
              [].forEach.call(evt.clipboardData.files, (file) => {
                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                      return;
                  }
                  const formData = new FormData();
                  formData.append("file", file);
                  //带请求头过验证
                  const config = {
                    headers:{
                      "Authorization": "Bearer " + getToken()
                    }
                  };
                  
                  this.$axios.post(`${process.env.VUE_APP_BASE_API}/common/upload`, formData,config).then(
                      res => {
                        console.log(res);
                          if (res.data.code == 200) {
                              console.log(res.data.fileName)
                              let length = this.Quill.getSelection().index; //光标位置
                              // 插入图片地址
                              this.Quill.insertEmbed(length, "image", "/dev-api"+res.data.fileName);
                              console.log(res.data.url)
                              // 光标后移一位
                              this.Quill.setSelection(length + 1);
                          } else {
                              this.$message({
                                  message: res.data.message,
                                  type: 'warning'
                              });
                          }
                      })
              });
          }
      
      // let text = (event.clipboardData || window.clipboardData).getData("text");
      // console.log("text", text);
    },

以上字符串改为

<p><img src="/dev-api/profile/upload/2023/06/09/image_20230609103058A002.png"></p>