业务需求
实现编辑器的截图上传功能,返回图片地址显示功能;
使用了mavonEditor 这个工具
地址是这个 https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/upload-images.md
图片上传前端报错情况
上截图,前端报错,但是接口已经返回了;
一直以为是前端的问题。。。。
后来才发现是接口返回参数不能这么定义
错误写法
前端处理
// 获取图片地址
uploadAddpicture(formdata) {
return request({
url: '/blogservice/blogs/bolg/url',
method: 'post',
data: formdata,
headers: { 'Content-Type': 'multipart/form-data' }
})
},
调用
methods: {
$imgAdd(pos, $file) {
// 第一步.将图片上传到服务器.
var formdata = new FormData()
formdata.append('image', $file)
blogs.uploadAddpicture(formdata).then((response) => {
// console.log('-=-=hello'+response)
this.$refs.md.$img2Url(pos, response.data.url)
})
参考代码请看小老弟写的这个demo哈!
https://github.com/coder-msc/guliEduFont/tree/master/src/api/blog