因为通过富文本编辑器上传本地图片,都会直接转成base64格式的,我们可以先上传到服务器,再从服务器返回的URL拿到给富文本框展示(引入我就不说了,直接看我上篇文章有说到过)
data () {
// 编辑器的 extensions
// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
return {
extensions: [
new Image({
// 默认会把图片生成 base64 字符串和内容存储在一起,如果需要自定义图片上传
uploadRequest (file) {
// 如果接口要求 Content-Type 是 multipart/form-data,则请求体必须使用 FormData
const 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 // 请求体
})