[Question] 刷新后的删除按钮丢失

[reoreo-zyt]

💬 Questions and Help

当我正常使用不退出时，图片删除按钮能正常出现。但是我点击刷新或者重新进行vue-router的路由渲染，删除按钮不出现了。

有什么办法解决这个问题吗？

附上程序代码

<template>
  <div>
    <mavon-editor
      ref="md"
      placeholder="请输入文章内容..."
      :boxShadow="false"
      v-model="content"
      :toolbars="toolbars"
      class="markdown-edit"
      @imgAdd="$imgAdd"
      @imgDel="$imgDel"
    />
    <DraggableButton></DraggableButton>
  </div>
</template>

<script>
import { storeImgs,deleteImgsByPath } from "@/request/picsApi";
import DraggableButton from "../components/DraggableButton.vue";
export default {
  components: {
    DraggableButton,
  },
  created() {
    this.initContent();
  },
  data() {
    return {
      content: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  methods: {
    // 上传图片方法
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      console.log(pos);
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("image", $file);
      const title = JSON.parse(window.localStorage.getItem("vuex")).markdownData
        .title;
      const titleReal = $file.name;
      formdata.append("title", titleReal);
      formdata.append("description", title);
      storeImgs(formdata).then((res) => {
        res.photo.imagePath = res.photo.imagePath.substring(8);
        this.$refs.md.$img2Url(
          pos,
          "http://localhost:4000/uploads/" + res.photo.imagePath
        );
      });
    },
    // 删除图片方法
    $imgDel(pos) {
      let data = pos[0];
      let dataIndex = data.lastIndexOf("/");
      data = data.slice(dataIndex+1, data.length);
      data = "uploads\\" + data;
      deleteImgsByPath(data).then((res)=>{
        console.log(res);
      }).catch(()=>{
        console.log("删除失败");
      })
    },
    initContent() {
      this.content = JSON.parse(
        window.localStorage.getItem("vuex")
      ).markdownData.content;
    },
  },
  watch: {
    content() {
      this.$store.dispatch("setMarkdownDataContent", this.content);
    },
  },
};
</script>

<style></style>

[lmlife2016]

根据你提供的两张图片来看，应该不是“删除”按钮丢失；应该是你上传的3张图片丢失了。

而刷新后或跳转路由后，图片丢失应该是正常的吧？mavon-editor并不会给你在本地保存图片；以及也没看到你有去后台拉取已上传图片。

[reoreo-zyt]

上传和删除图片的后台都是写了的，存在uploads文件夹里，通过访问静态文件的方式加载图片：

app.use('/uploads', express.static(path.resolve('uploads')));

import { storeImgs,deleteImgsByPath } from "@/request/picsApi";

import { postImgs, deleteImgs, get } from "./http";

// 存储图片
export const storeImgs = (data) =>
  postImgs("http://localhost:4000/api/photos", data);

// 删除图片
export const deleteImgsByPath = (data) =>
  deleteImgs("http://localhost:4000/api/byPath", data);

这里引入的代码和后端的代码我没有给出来

后端存储图片的代码

现在问题就是我要重新编辑我的内容的话，存在服务器或者本地的图片因为没有删除按钮导致无法调用API删除，只是把markdown内容删掉的话存在服务器或者本地的图片还在，没有真正删除

如果我要保证删除按钮一直在应该怎么做呢？