因为通过富文本编辑器上传本地图片,都会直接转成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 // 请求体})