Closed xiangaxiangaxiang closed 4 years ago
<template> <div> <button @click="uploadimg">upload</button> <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor> </div> </template> <script> export default { data() { img_file: {} }, methods:{ $imgAdd(pos, $file){ // 缓存图片信息 console.log(pos) this.img_file[pos] = $file; }, $imgDel(pos){ delete this.img_file[pos]; }, uploadimg($e){ // 第一步.将图片上传到服务器. var formdata = new FormData(); for(var _img in this.img_file){ formdata.append(_img, this.img_file[_img]); } axios({ url: '/back/article/image_upload', method: 'post', data: formdata, headers: { 'Content-Type': 'multipart/form-data' }, }).then((res) => { /** * 例如:返回数据为 res = [[pos, url], [pos, url]...] * pos 为原图片标志(0) * url 为上传后图片的url地址 */ // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url) for (var img in res.data.data) { // $vm.$img2Url 详情见本页末尾 this.$refs.md.$img2Url(img[0], img[1]); } }) } } } </script>
这个就是我直接弄下来的代码除了url之外没有修改 然后变成这样 ![1.jpg](undefined)![2.jpg](2)
![1.jpg](undefined)![2.jpg](2)
搞定了,但是例子是错的。for in 循环拿到的是key而不是value,所有改成
for (let item in res) { let img = res[item] this.$refs.md.$img2Url(img[0], img[1]) }
这个就是我直接弄下来的代码除了url之外没有修改 然后变成这样
![1.jpg](undefined)![2.jpg](2)