版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zjiang1994/article/details/79851439
Vue用axios插件实现TinyMCE的图片上传功能
最近工作用到富文本编辑器,通过各种对比选择了TinyMCE编辑器。
在配置方面参考了这篇文章vue项目移植tinymce踩坑,
对原文作者表示感谢。
同时,因为项目中使用axios插件进行请求,为了统一格式,使用axios重新实现了TinyMCE自带的上传功能。
具体方式如下:
再次强调,如果不会再Vue中引入TinyMCE可以参考vue项目移植tinymce踩坑。
在上文配置的init
方法中添加如下方法(就在上文中setup
方法的后面):
// 图片上传三个参数,图片数据,成功时的回调函数,失败时的回调函数
images_upload_handler: function (blobInfo, success, failure) {
if (blobInfo.blob().size > self.maxSize) {
failure('文件体积过大')
}
if (self.accept.indexOf(blobInfo.blob().type) >= 0) {
uploadPic()
} else {
failure('图片格式错误')
}
function uploadPic () {
let formData = new FormData()
// 服务端接收文件的参数名,文件数据,文件名
formData.append('upfile', blobInfo.blob(), blobInfo.filename())
axios({
method: 'POST',
// 这里是你的上传地址
url: 'uploadimage',
data: formData,
})
.then((res) => {
// 这里返回的是你图片的地址
success(res.data.url)
})
.catch(() => {
failure('上传失败')
})
}
}
以上。
再次感谢上文作者vue项目移植tinymce踩坑。