700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > element-tiptap富文本编辑器 上传本地图片

element-tiptap富文本编辑器 上传本地图片

时间:2022-10-29 07:42:38

相关推荐

element-tiptap富文本编辑器 上传本地图片

因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过)

data () {// 编辑器的 extensions// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中return {extensions: [new Image({// 默认会把图片生成 base64 字符串和内容存储在一起,如果需要自定义图片上传uploadRequest (file) {// 如果接口要求 Content-Type 是 multipart/form-data,则请求体必须使用 FormDataconst formdata = new FormData()//image是后台接口需要参数名formdata.append('file', file)//调用接口进行上传,拿到服务器返回的图片地址return fileUploadImage(formdata).then(res => {// 这个 return 是返回请求成功后拿到的url,赋值给富文本编辑器里面的img中的src属性return res.data})} // 图片的上传方法,返回一个 Promise<url>}), // 图片

还有接口那块代码

// 上传图片export const fileUploadImage = data => request({url: API_URL.POST_UPLOAD_IMAGE, // path路径method: 'POST', // 请求方法headers: {// 请求头'Content-Type': 'multipart/form-data' // 上传文件所要求的格式formdata},data // 请求体})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。