imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.63k stars 156 forks source link

全局引用编辑器时,上传图片接口无法被调用 #551

Closed lamanlu closed 5 months ago

lamanlu commented 5 months ago

Describe the issue

使用CDN方式引入的组建

<link rel="stylesheet" href="https://unpkg.com/md-editor-v3@4.15.6/lib/style.css" />
<script src="https://unpkg.com/md-editor-v3@4.15.6/lib/umd/index.js"></script>

模板 <md-editor-v3 v-model="context" @onUploadImg="uploadImg" />

相关的JS函数实现

      async uploadImg(files, callback) {
        console.log("111111111111111")
        const res = Promise.all(
          files.map((file) => {
            return new Promise((resolve, reject) => {
              const form = new FormData();
              form.append('file', file);

              axios.post('/admin/upload/img', form, {
                headers: {
                  'Content-Type': 'multipart/form-data',
                  "json-request": true
                }
              })
              .then((response) => resolve(response.data.url))
              .catch((error) => reject(error));
            });
          })
        );
        res.then((urls) => callback(urls));
      }

在控制台里,这串 111都不会被打印,请问是哪里没写对吗?

Procedure version

v3@4.15.6

Reproduction link

No response

imzbf commented 5 months ago

以cdn的方式加载组件,vue中的组件、属性和事件名等要以-分割,不能用驼峰

lamanlu commented 5 months ago

改成 @on-upload-img="uploadImg" 果然可以触发调用了, thx