vue-editor2 上傳圖片的坑 @imageAdded 自定義圖片上傳的時候  @imageAdded 不觸發,無效

 vue中的富文本編輯器,vue2-editor,  使用 use-custom-image-handler 自定義圖片上傳的時候  @imageAdded 不觸發,無效;

 <!-- @imageAdded="handleImageAdded" 這裏不要使用駝峯,否則不太好使-->

要用 @image-added="handleImageAdded" 才行...

<template>
    <vue-editor
        v-model="editorVal"
        use-custom-image-handler
        @image-added="handleImageAdded"
    />
    <!-- @imageAdded="handleImageAdded" 這裏不要使用駝峯,否則不太好使-->
</template>
<script>
import { VueEditor } from 'vue2-editor';
// import fileUpload from '@/common/method/file.upload';
export default {
    components: { VueEditor },
    model: {
        prop: 'text',
        event: 'changeEditor'
    },
    props: {
        text: {
            required: false,
            type: [String],
            default: null
        }
    },
    data() {
        return {
            editorVal: null,
            uploadConf: {
                region: null,
                accessKeyId: null,
                accessKeySecret: null,
                bucket: null,
                stsToken: null,
                qiNiuToken: null,
                imgUrl: null,
                type: null
            }
        };
    },
    watch: {
        editorVal(val) {
            // console.log(val);
            this.$emit('changeEditor', val);
        },
        text(val) {
            this.editorVal = this.text;
        }
    },
    created() {
        this.editorVal = this.text;
    },
    methods: {

        /**
         * 圖片上傳操作
         */
        handleImageAdded(file, Editor, cursorLocation, resetUploader) {
            console.log(file);
            // fileUpload(file).then(({ saveName, savePath }) => {
            //     //把獲取到的圖片url 插入到鼠標所在位置 回顯圖片
            //     Editor.insertEmbed(cursorLocation, 'image', `${this.$APP_STATIC}${saveName}${savePath}`);
            //     resetUploader();
            // }).catch((error) => {
            //     console.error(error);
            // });
        }

    }
};
</script>

file.upload.js

/**
 * 單文件上傳
 * @param file 文件對象
 * @param params 額外參數
 */
import { uploadFile } from '@/http';
export default (file, params) => {
    return new Promise(async (resolve, reject) => {
        try {
            console.log(file);
            let fm = new FormData();
            fm.append('file', file);
            const { code, data } = await uploadFile({ data: fm, params });
            console.log(code);
            if (code == 200) {
                resolve(data);
            }
        } catch (error) {
            console.error(error);
            reject(error);
        }
    });
};

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章