hinesboy / mavonEditor

mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
http://www.mavoneditor.com/
MIT License
6.45k stars 918 forks source link

$img2Url转换图片路径变成undefined #552

Closed xiangaxiangaxiang closed 4 years ago

xiangaxiangaxiang commented 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) image

xiangaxiangaxiang commented 4 years ago

搞定了,但是例子是错的。for in 循环拿到的是key而不是value,所有改成

for (let item in res) {
   let img = res[item]
   this.$refs.md.$img2Url(img[0], img[1])
}