vue-quill-editor限制图片的大小已经张数

 handlers: {

                            image: () => {

                                let fileInput = this.$refs['myTextEditor'].$el.querySelector('input.ql-image[type=file]')

                                if (!fileInput) {

                                    fileInput = document.createElement('input')

                                    fileInput.setAttribute('type', 'file')

                                    fileInput.setAttribute('name', 'file')

                                    fileInput.setAttribute('accept', 'image/*')

                                    fileInput.classList.add('ql-image')

                                    fileInput.style.display = 'none'

                                    fileInput.addEventListener('change', () => {

                                        const imgs = this.value && this.value.match(/<img.*?/g)

                                        if (imgs && imgs.length >= 12) {

                                            this.$message({

                                                type: 'warning',

                                                message: '最多上传12张图片'

                                            })

                                            return

                                        }

                                        const file = fileInput.files[0]

                                        const valid = checkPicTypeAndSize(file, {PICTURE_MAX_SIZE: 3 * 1024 * 1024, PICTURE_MAX_TIP: '3MB'})

                                        if (!valid) {

                                            return

                                        }

                                        toBase64(file).then((data) => {

                                            const index = (this.$refs['myTextEditor'].quill.getSelection() || {}).index || this.$refs['myTextEditor'].quill.getLength()

                                            this.$refs['myTextEditor'].quill.insertEmbed(index, 'image', data )

                                        })

                                        fileInput.value = ''

                                    })

                                    this.$refs['myTextEditor'].$el.appendChild(fileInput)

                                }

                                fileInput.click()

                            }

                        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值