quill-editor复制图片有base64转为地址上传

mounted() {
        let quill = this.$refs.myQuillEditor.quill;
        quill.root.addEventListener(
            "paste",
            (evt) => {
                if (
                    evt.clipboardData &&
                    evt.clipboardData.files &&
                    evt.clipboardData.files.length
                ) {
                    evt.preventDefault();
                    [].forEach.call(evt.clipboardData.files, (file) => {
                        if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                            return;
                        }
                        const formData = new FormData();
                        formData.append("file", file);
                        // this.$axios.post(`${this.$Tools.Conts.domain}uploads`, formData).then(  或
                        projectDevelopApi.uploadFile(formData).then(
                            res => {  // 调用的接口
                                if(res.code==200){
                                    this.uploadSuccess(res)
                                }else{
                                    this.$message.error(res.errMsg);
                                }
                                // if (res.data.code == 0) {
                                //     console.log(res.data.data.src)
                                //     // window.open(res.data.data.src)
                                //     let length = quill.getSelection().index; //光标位置
                                //     // 插入图片地址
                                //     quill.insertEmbed(length, "image", res.data.data.src);
                                //     // 光标后移一位
                                //     quill.setSelection(length + 1);
                                // } else {
                                //     console.log(res.data)
                                //     this.$message({
                                //         message: res.data.message,
                                //         type: 'warning'
                                //     });
                                // }
                            })

                    });
                }
            },
            false
        );
   },
methods:{
// 上传图片成功的回调
        uploadSuccess (res) {
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上传成功
            if (res) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片,res为服务器返回的图片链接地址
                // quill.insertEmbed(length, 'image', res.result.fileUrl)
                // quill.insertEmbed(length, 'image', "/tycy-doc-manage"+res.data.fileUrl)
                quill.insertEmbed(length, 'image', globalAgent + res.data.fileUrl)// globalAgent为全局定义的常量
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                // 提示信息,需引入Message
                this.$message.error('图片插入失败!')
            }
        },
}
posted @ 2022-05-26 16:43  seekHelp  阅读(507)  评论(0编辑  收藏  举报