图片预览问题

[mr-m0nst3r]

在DOC和API里面找了找，能找到onUploadImage的代码，也跑通了，但是预览不出来。

在其他ISSUE看到相关问题，说是直接下载模式不行，那我应该调整成什么模式？

另外，下载需要携带 JWT， 要使用自己封装的axios，应该如何配置？

谢谢

[mr-m0nst3r]

补充：

粘贴图片时没有问题，

默认不显示预览，当点击预览时：

[mr-m0nst3r]

补充：

我把server弄成直接可在浏览器中打开的那种方式了，而且ctrl+v可以上传成功，返回数据也成功，但是预览的时候还是上面的问题。

求指教。

[imzbf]

麻烦提供一下完整的图片链接呢

[mr-m0nst3r]

我是本地的前端和后端。。。

给你截个图吧 浏览器显示要正常的 http://localhost:8000/static/2eda95b7bd744acb8daad3bc9044c041.png：

这是上传的地方：

报错：

![Uploading image.png…]()

前端跑在localhost:3000上，后端跑在localhost:8000上，后端已经开启了 CORS，按说应该没问题呀。。。。

[imzbf]

好的谢谢，我尝试下还原这个问题。

[mr-m0nst3r]

我尝试了一下，把这个地址写在页面里，是可以显示出来的：

另外，这是lock里面的dependencies:

"dependencies": {
        "axios": "^0.26.0",
        "element-plus": "^2.0.2",
        "md-editor-v3": "^1.10.1",
        "pinia": "^2.0.11",
        "qs": "^6.10.3",
        "sanitize-html": "^2.7.0",
        "scss": "^0.2.4",
        "vue": "^3.2.25",
        "vue-router": "^4.0.12"
      },
      "devDependencies": {
        "@vitejs/plugin-vue": "^2.2.0",
        "unplugin-auto-import": "^0.5.11",
        "unplugin-vue-components": "^0.17.18",
        "vite": "^2.8.0"
      }
    },

感谢感谢

[imzbf]

这个看起来是内部生命周期函数对已卸载的元素访问的错误，不是图片的问题。但是这边没法还原问题，这边方便提供一个最简版的可还原这个问题太的代码吗？

[mr-m0nst3r]

你看下下面代码能不能跑起来。

<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>

The backend is based on fastapi, here's the code if you need:

mport shutil
from pathlib import Path
from fastapi import APIRouter, Depends, HTTPException, status, UploadFile, File
from pathvalidate import sanitize_filename, sanitize_filepath
from fastapi.responses import FileResponse
from backend.core.config import settings

app = FastAPI(
    # dependencies=[Depends(get_current_active_user)]
)

app.mount("/static", StaticFiles(directory="uploads"), name="static")

upload_dir = "./uploads"

def generate_file_name() -> str:
    import uuid
    filename = uuid.uuid4().hex
    return filename

@app.post("/")
async def upload_file(
        file: UploadFile = File(...)
):

    upload_filename = generate_file_name()
    suffix = Path(file.filename).suffix
    full_filename = f"{upload_filename}{suffix}"
    saved_file = f"{upload_dir}/{upload_filename}{suffix}"
    with open(saved_file, "wb") as buffer:
        shutil.copyfileobj(file.file, buffer)
    return {
        "url": "http://localhost:8000/static/"+full_filename
    }

我精简了一下，应该能跑起来。

谢谢大佬。

[imzbf]

用这个代码这边也不能还原问题，之前遇到过没有正确使用vue-router产生的vue3钩子函数重复执行的bug，这边帮你解决这个问题可能需要给一个最小的可运行项目才行哈。

[mr-m0nst3r]

没有正确使用router？能不能给些正确使用的建议？

[imzbf]

没有正确使用router？能不能给些正确使用的建议？

你看看 #40 这个。

[mr-m0nst3r]

你给我个邮箱吧 我把前端源码给你发过去吧 我也不能确定问题。这个界面是在几次跳转之后的，但没有keepalive的设置。

[imzbf]

zbfcqtl@gmail.com

[mr-m0nst3r]

大佬，那天给你发过去了，担心你没留意，在这儿提醒下

[imzbf]

大佬，那天给你发过去了，担心你没留意，在这儿提醒下

收到的，需要后面抽时间看下哈。

[mr-m0nst3r]

好的 谢谢

[mr-m0nst3r]

在用其他的一个md插件，关闭这个issue了

[imzbf]

很抱歉，最近处理私事耽搁了。这边找到的问题是，不显示图片是因为sanitizeHtml在分析图片代码时，认为不安全，给删除了。md报错的原因是多个组件冲突了，这边会在1.10.1之后的版本修正。

[mr-m0nst3r]

@imzbf 感谢大佬，项目比较紧，暂时用其他方案替代，希望这个插件越做越好。