zoukankan      html  css  js  c++  java
  • ueditor富文本图片上传问题

    使用ueditor富文本图片上传问题,图片上传后保存有的图片为加载中。。。

    因为设置contentChange监听,可以监听到值的变化

    但是在上传一个较大的图片时,上传的时间会很长,contentChange监听到的img是一个临时的加载中的动画,

    后面上传好替换了URL,但是contentChange没有监听到变化,所以保存的时候为加载中的动画

    所以在保存的时候强制获取富文本的内容再保存

    富文本组件:

     methods: {
          getUEContent2() { // 获取内容方法并传给调用组件
            var content = this.editor.getContent()
            this.$emit('getContentValue',content)
          }
        },

    父组件:

    // 同一个页面放两个富文本时,id不能写死,需要设置为动态的
    // 设置ref,可供保存时父组件调用子组件的方法
              <Ueditor 
              ref="gameUeditor1"
              eleId="id1"
              name="UE"
                :defaultMsg="params.content1"
                @getContentValue="getContentChange"
              /> 
              <Ueditor 
              ref="gameUeditor2"
              eleId="id2"
                name="UE"
                :defaultMsg="params.content1"
                @getContentValue="getContentChange1"
                /> 
    getContentChange(value){
          this.params.content1 = value
        }, 
          getContentChange1(value){
          this.params.content2 = value
        },
    save() {
          // 获取富文本内容(图片上传后未及时更新的原因)
          this.$refs.gameUeditor1.getUEContent2();
          this.$refs.gameUeditor2.getUEContent2();
    。。。。。。
    }

    另外,上传的地址修改的,可以在ueditor.config中修改

    /**
         * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
         */
        window.UEDITOR_CONFIG = {
    
    
            /* 上传图片配置项 */
            ,imageUploadUrl: `/上传地址?Token=${getToken()}`
            , imageUploadName: 'file'
            , imageMaxSize: 2048000 /* 上传大小限制,单位B */
            , imageAllowFiles: [".png", ".jpg", ".jpeg", ".gif", ".bmp"] /* 上传图片格式显示 */
    ……
    }
  • 相关阅读:
    sql:drop、delete、truncate的区别
    pgsql:插入数据,存在就更新,不存在就插入
    sql:多表连接查询
    克隆模式
    canvas 实现星空闪烁的效果,鼠标滑动,连接周围的点
    JS微信网页图片预览可放大缩小
    muduo_base 02 (Atomic)
    muduo_base 01 (Timestamp)
    select/poll/epoll
    socket编程(二)
  • 原文地址:https://www.cnblogs.com/zhuangcui/p/12938119.html
Copyright © 2011-2022 走看看