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

若依的富文本

字符串是上述格式

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

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

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

具体是这个代码
@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'});}})});}},

字符串为这种格式

(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);},

以上字符串改为

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！