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);
        }
    });
};

 

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读