图片预览问题 about md-editor-v3 HOT 19 CLOSED

<template>
  <el-row :gutter="20">
    <el-col :span="16">
      <div class="vulnmain">
        <!-- the main-->
        <h1>Sumbit Vulnerability</h1>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          class="demo-ruleForm"
          size="large"
          label-position="left"
        >
          <el-form-item label="描述" prop="details">
            <!-- <el-input v-model="ruleForm.version"></el-input> -->
            <md-editor
              editor-id="details"
              v-model="ruleForm.details"
              preview-theme="github"
              :sanitize="sanitize"
              :preview="false"
              :toolbars="toolbars"
              @onUploadImg="onUploadImg"
            />
          </el-form-item>

          <el-form-item>
            <el-button @click="submitForm" type="primary">Save</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="8">
      <!-- the tip-->
      <div class="tips">
        <h1>some tips</h1>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
const ruleForm = ref({
  details: "",
});

const toolbars = ref([
  "italic",
  "underline",
  "bold",
  "image",
  "table",
  "preview",
]);

const onUploadImg = async (files, callback) => {
  const res = await Promise.all(
    Array.from(files).map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append("file", file);

        api
          .post("/uploads/", form, {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item) => item.data.url));
};

onMounted({
  ruleForm: loadDetail(route.query.id),
});
</script>