根据上期富文本改变原有样式视频上传 这次咋们讲图片上传quill-editor

var vm = null;
// 点击视频按钮让原有的东西消失
var toolbarOptions = {
  // 点击视频改变原有样式出现弹框
    video: function (value) {
        if (value) {
        vm.uploadvideo = true;
        }
    },
  // 点击图片改变原有样式出现弹框
    image: function (value) {
        if (value) {
        vm.uploadimage = true;
        // 触发input框选择图片文件
        // document.querySelector('.img-uploader input').click()
        } else {
        this.quill.format('image', false);
        }
    },
};

上面大家应该都很熟悉 我写上了图片的原有样式

<Modal
        v-model="uploadimage"
        :mask-closable='false'
        title="多图上传"
        @on-ok="handleImgOK"
        @on-cancel="handleImgcancel"
        >
            <Tabs value="img2" style="min-height:200px;max-height:400px;overflow-y:auto">
                <!-- <Tab-pane label="插入图片" name="img1">
                    <div class="videonavtion">
                        <span>图片地址:</span>
                        <Input v-model="imageValue" />
                    </div>
                </Tab-pane> -->
                <Tab-pane label="本地上传" name="img2">
                    <div class="upload-list"  v-for="(item,index) in uploadList" :key='index'>
                        <template v-if="item.status === 'finished'">
                            <img :src="item.url" v-if="item.name.indexOf('jpg')!='-1'||item.name.indexOf('jpeg')!='-1'||item.name.indexOf('png')!='-1'">
                        </template>
                        <template v-else>
                            <div class="progress">
                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info stroke-color="#4a99ec"></Progress>
                            </div>
                        </template>
                    </div>
                    <Upload
                        ref="upload"
                        class="img-uploader"
                        :data="ticket"
                        :show-upload-list="false"
                        :on-success="handleSuccess"
                        :before-upload="beforeAvatarUpload"
                        multiple
                        type="drag"
                        action="地址"
                        :style="uploadList.length>0?'display: inline-block;':''"
                    >
                        <div style="box-sizing:border-box;width: 120px;height:120px;padding:10px;" v-if="uploadList.length>0">
                            <div style="width: 100px;height:100px;line-height:100px;background:#FBFDFF;border: 1px dashed #DCDEE2;border-radius:4px">
                                <icon class="icontianjia-xishouye question" size="50"></icon>
                            </div>
                        </div>
                        <Button type="primary" style="margin: 20px auto;width:120px;" v-else>点击选择图片</Button>
                    </Upload>
                </Tab-pane>
            </Tabs>
        </Modal>

有一个本地上传 还有链接上传哦

 handleImgOK(){
            const quill = this.$refs.myTextEditor.quill;
          //视频插入在富文本中的位置
            let urls = [];
            if(this.imageValue){
                urls.push(this.imageValue);
                this.imageValue = '';
            }
            urls = urls.concat(this.hostUrl);
            this.hostUrl.length = 0;
            this.uploadList.length = 0;
            urls.forEach(item=>{
                let range = this.$refs.myTextEditor.quill.selection.savedRange;
                let index = 0;
                // 获取光标所在位置
                //当编辑器中没有输入文本时，这里获取到的 range 为 null
                if (range && range.index) {
                    index = range.index;
                }
                console.log(111,range,'-',index,'-',item)
                // 图片
                quill.insertEmbed(
                index,
                "image",
                item
                );
                // 调整光标到最后
                quill.setSelection(index + 1);
            })
        },

 handleImgcancel(){
            this.uploadList.length = 0;
            this.uploadimage = false;
        },

   // 本地图片上传成功
        handleSuccess(res, file) {
            console.log(2222,file)
            // 动态添加 ref  通过 eval () 去执行
            let  self =this;
            this.uploadList.forEach((item,index)=>{
                item.url = self.hostUrl[index]
            })
        },

 // 本地图片判断图片后缀
        beforeAvatarUpload(file) {
            //todo:图片格式限制
            const isJPG = file.type === ["image/png"||"image/gif"|| "image/jpeg"|| "image/bmp"||"image/x-icon"];
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isJPG) {
                tool.msgError(this,"请上传正确的图片格式");
                return false;
            }
            if (!isLt2M) {
                tool.msgError(this,"上传图片大小不能超过 10MB!");
                return false;
            }
            let self = this;
            let pr1 = beforeUpload.get(file);
            let promise = new Promise((resolve,reject)=>{
                pr1.then((result)=>{
                    self.ticket = result[0];
                    self.hostUrl.push(result[1])
                    this.$nextTick(function(){
                        resolve(true)
                    })
                    })
            })
            return promise
        },

  mounted(){       
        vm = this;
        this.uploadList = this.$refs.upload.fileList;
        this.kosptes();
        this.answer = this.value
        this.$refs.myTextEditor.quill.setContents(this.answer)
        this.$refs.myTextEditor.quill.on('text-change', () => {
            this.$emit('input', this.answer)
        });
        // this.initButton();
    },