美文网首页
【v2.83】eidtor插入图片支持临时文件地址

【v2.83】eidtor插入图片支持临时文件地址

作者: nCov | 来源:发表于2019-09-30 12:43 被阅读0次

版本以前富文本eidtor,不支持真机插入临时地址,也就会写很多代码逻辑!
经真机测试确实支持临时路径了,这个非常实用可以在提交阶段再上传图片,避免
二次上传图片。

insertImage() {
      let that = this;
     uploadImg.localUpload_img(1).then(_res => {
       let pathImgArr = _res[0],              //得到原始图片临时路径的数组
           imgsizeArr = _res[1],              //得到原始图片缩放后的尺寸数组
           canvasidArr = [];                  //存放动态生成画布id

      that.setData({ canvasimg: imgsizeArr })
       canvasidArr.push(wx.createCanvasContext(`tempcanvas`))
       return uploadImg.getCanvaspath(0, pathImgArr, imgsizeArr, canvasidArr)//绘制图片

     }).then(c_res => {
       that.setData({ tempPath: c_res[0] })
        return that.uploadCloudimg(c_res)     //上传图片


     }).then(cloudimg => {
       
   that.editorCtx.insertImage({
          src: cloudimg[0],             //替换后图片下载地址
            success: function () {
              wx.hideLoading() 
              let tempPath  = that.data.tempPath,      //本地临时图片地址
                  tempimages = that.data.tempimages     //返回数据数组
                  tempimages.push([tempPath, cloudimg[0]])
                  that.setData({ tempimages})  
             }
          })

     }).catch(err => {
       wx.showToast({ title: '上传失败', icon: 'none', duration: 1500 })
     })
        
      
    
    },

//上传图片到临时文件夹
    uploadCloudimg(imagesArr){
      let timeRand = Number(new Date) + Math.ceil(Math.random() * 10000),
          filePath = imagesArr,              //本地路径
         cloudPath = [],                     //云路径
              type = filePath[0].match(/\.[^.]+?$/);

      cloudPath.push(`temp/${timeRand}${type}`)
      return uploadImg.cloudUpload_img(0, filePath, cloudPath).then(imgArr => {
        return imgArr;
      })
    },

精简一下

 insertImage() {
      let that = this;
     uploadImg.localUpload_img(1).then(_res => {
      
       let pathImgArr = _res[0],              //得到原始图片临时路径的数组
           imgsizeArr = _res[1],              //得到原始图片缩放后的尺寸数组
           canvasidArr = [];                  //存放动态生成画布id

          that.setData({ canvasimg: imgsizeArr })
          canvasidArr.push(wx.createCanvasContext(`tempcanvas`))
          return uploadImg.getCanvaspath(0, pathImgArr, imgsizeArr, canvasidArr)//绘制图片

     }).then(c_res => {
      
        
          that.editorCtx.insertImage({
            src: c_res[0],
            success: function () {
              wx.hideLoading()

            }
          })

     }).catch(err => {
         wx.showToast({ title: '上传失败', icon: 'none', duration: 1500 })
     })
        
      
    
    },

相关文章

  • 【v2.83】eidtor插入图片支持临时文件地址

    版本以前富文本eidtor,不支持真机插入临时地址,也就会写很多代码逻辑!经真机测试确实支持临时路径了,这个非常实...

  • Android富文本编辑器:XRichText

    XRichText 一个Android富文本类库,支持编辑和预览,支持插入和删除图片。GitHub地址:https...

  • md语言的使用

    插入图片 在 Markdown 中,插入图片不需要其他按钮,你只需要使用![] (图片地址) 插入引用 插入链接和...

  • 【v2.80】 eidtor支持云图片路径

    【基础版本2.80】 富文本editor支持云图路径 **首先在未修复之前,富文本是不支持云图片路径(File I...

  • Markdown 图片与链接 语法

    插入图片和插入链接的语法很像,区别在一个 !号 {ImgCap}{/ImgCap} 链接为: 插入图片的地址需要图...

  • Hello Markdown

    markdown 练习 插入网络地址 baidu 引用文件 插入代码 hello world 插入图片坂本 表格 ​

  • Android 自定义底部导航栏BottomNavigation

    BottomNavigationbar 源码地址 使用 功能 支持 图片+文字 组合 支持 仅图片 支持 未读消息...

  • Markdown:插入图片

    用markdown插入图片![](图片的链接地址) 网页上的图片找到图片Copy Image Address 搜索...

  • ios富文本编辑器

    方案:html+wkwebview,支持加粗、下划线、斜体、对齐方式、字体更改颜色、插入图片、插入视频、插入链接、...

  • React集成TinyMCE(三)上传图片

    完成上一步之后我们的控件插入图片时只能简单地插入远程的图片,还不能支持图片上传。下面我们就来开启图片上传功能。 第...

网友评论

      本文标题:【v2.83】eidtor插入图片支持临时文件地址

      本文链接:https://www.haomeiwen.com/subject/uhycpctx.html