mavonEditor 我就想问问删除图片到底怎么删除！！！！！

版本 2.6.17 基本尝试了几乎所有的方法你们到底删除成功没有！！！！！！！！！！折腾到凌晨2:30

唯一成功的那次一直循环调用函数差点把电脑跑死

Sep 06 '18 18:09 JJymUp

我们都一样~~~~~~~~~~~~~~~~~

Sep 10 '18 14:09 manlene

那个filename到底是哪个啊

Sep 12 '18 01:09 fengzi91

使用imgDelByFilename无法清除输入区内容，这里有一个凑合用的方法： $vm.$imgDel([file, fileName]) 我在上传图片的时候判断图片大小，如果图片过大就删除图片

给代码粘一下： html: <mavon-editor :ishljs="true" :toolbars="toolbars" :value="mdCode" class="m-editor" @save="saveDraft" @imgAdd="imgAdd" ref="md" ></mavon-editor> js: ` methods: {

imgAdd (fileName, file) {

  const $vm = this.$refs.md

  console.log($vm)

  if (file.size >= 1048576) {

    this.$confirm({

      content: '图片大小限制1MB',

      type: 'error'

    }).then(() => {

      this.$message({

        content: '已取消上传',

        type: 'success'

      })

      // $vm.$refs.toolbar_left.$imgDelByFilename(fileName)

      $vm.$imgDel([file, fileName])

    }).catch(() => {

      this.$message({

        content: '已取消上传',

        type: 'success'

      })

      // $vm.$refs.toolbar_left.$imgDelByFilename(fileName)

      $vm.$imgDel([file, fileName])

    })

  }

},`

Oct 10 '18 05:10 JiWeiZ

但是工具栏里的图片还是有缓存的，不过只是内容区没有内容了，反正存数据的时候也就只存内容区的，能用

Oct 10 '18 06:10 JiWeiZ

同问..

Nov 02 '18 08:11 MrKiven

版本 2.6.17 上传图片什么的都没问题，可是我删除图片就是删不了，找不到办法，很绝望。

Nov 25 '18 05:11 Mnufs

@Mnufs 我也在研究这个

Nov 25 '18 05:11 91651

mavon.$imgUpdateByUrl(pos, img); $file.remoteName = r.data.name;

实在想不到什么好的办法，又不想写多余的代码。

斗了个机灵，给$file自定义一个字段，删除的时候按照这个字段删除。

Nov 25 '18 06:11 91651

@91651 updateByurl 可以删除吗？

Nov 26 '18 05:11 Mnufs

@Mnufs 可以在工具栏中点删除后，删除。不知道，你是要在哪里删除？

Nov 26 '18 06:11 91651

@91651 我把图片存到了云存储上，回调替换成url都没问题，但是删除调用那个imgDel就只删掉了工具栏里面的，内容里面的图片没有删掉，你是怎么做删除的，方便贴一下完整的代码吗？

Nov 26 '18 06:11 Mnufs

@Mnufs 我是ts写的。

Nov 26 '18 06:11 91651

我直接把工具栏里的删除图片的按钮用样式隐藏了，这个本来就是个辅助性功能，markdown文档直接删内容就好了

Dec 28 '18 09:12 rainAgain

我贴上我的解决代码，给大家参考下，

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

export default {
  name: "write",
  data() {
    return {
      mdText: "",
      images: {}
    };
  },
  components: {
    mavonEditor
  },
  methods: {
    $imgAdd(pos, file) {
      var formdata = new FormData();
      formdata.append("image", file);
      this.$axios({
        url: this.$apiServer + "/addImage",
        method: "POST",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      })
        .then(response => {
          if (response.data.status != 200) {
            console.error(response.data.message);
            alert(response.data.message);
          } else {
            this.$set(
              this.images,
              this.$md5(file.name + file.size),
              response.data.response.url
            );
            this.$refs.mdeditor.$img2Url(pos, response.data.response.url);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    $imgDel(rs) {
      var k = this.$md5(rs[0].name + rs[0].size);
      if (k in this.images) {
        var url = this.images[k];
        this.$delete(this.images, k);
        this.$refs.mdeditor.$imgDel([rs[0], url]);
      }
    }
  }
};
</script>

测试发现，在默认imgAdd和imgDel未做改动时，在点击删除图片时，是可以做到同时删除工具栏的图片和文档里的图片的。但是在修改imgAdd函数代码后就不行了，经过多次测试，发现就是在使用了img2Url函数后，图片因为路径名改了，导致imgDel在检索图片时检索不到，（这里可以通过在打印imgDel的传参来检查，传参的第二个参数没有随img2Url而改变），

后面就是通过对象来检索到对应图片来完成文档图片删除了