vue-editor2 上传图片的坑 @imageAdded 自定义图片上传的时候  @imageAdded 不触发,无效

31 篇文章 1 订阅
1 篇文章 0 订阅

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

 

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狼丶宇先森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值