小程序（二十五）微信小程序富文本编辑器editor上传图片

最新推荐文章于 2024-08-19 20:22:19 发布

camellias_

最新推荐文章于 2024-08-19 20:22:19 发布

阅读量2.1k

点赞数 2

分类专栏：微信小程序 javascript 文章标签：小程序 javascript

本文链接：https://blog.csdn.net/qq_39708228/article/details/120492544

版权

javascript 同时被 2 个专栏收录

52 篇文章 5 订阅

订阅专栏

微信小程序

26 篇文章 21 订阅

订阅专栏

本文探讨了将微信小程序中图片上传功能从本地缓存切换到服务器的过程，展示了如何使用wx.uploadFile API实现图片上传，并结合editor组件进行操作，包括选择图片、上传验证及成功插入图片的示例。

摘要由CSDN通过智能技术生成

官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中，代码如下所示：

  insertImage(e) {
    console.log(e);
    const that = this
    wx.chooseImage({
      count: 1,
      success: function (res) {
        console.log(res);
        that.editorCtx.insertImage({
          src: res.tempFilePaths[0],
          data: {
            id: 'abcd',
            role: 'god'
          },
          width: '80%',
          success: function () {
            console.log('insert image success')
          }
        })
      }
    })
  }

我这里封装的editor自定义组件图片上传也是同官方给出的示例一致，也是使用的小程序缓存。

但是在实际开发中，图片我们还是需要上传至服务器中的。

小程序上传文件需要使用到 wx.uploadFile 这个API，这里我不做赘述，直接上代码：

/**、
   * 插入图片
   */
  insertImageEvent() {
    var self = this;
    wx.chooseImage({
      count: 1,
      success: response => {
        let path = response.tempFilePaths[0];
        //调用子组件方法，图片应先上传再插入，不然预览时无法查看图片。(这里调用子组件查看存至本地的临时图片)
        // richText.insertImageMethod(path).then(result => {
        //   console.log('[insert image fail callback]=>', result)
        // }).catch(res => {
        //   console.log('[insert image fail callback]=>', res)
        // });//*/
        wx.uploadFile({ //把临时图片上传到服务器
          url: app._server + '/xxx/xxxxxx,
          filePath: response.tempFilePaths[0],
          file: response.tempFilePaths[0],
          name: 'file',
          formData: {
            project_id:id,
          },
          success: (res) => {
            let updata = JSON.parse(res.data);
            console.log(updata);
            if (updata.code == 1) {
              richText.editorCtx.insertImage({ //这里是富文本编辑器 editor 组件插入图片方法；
                src: updata.data,
                data: {
                  id: 'imgage',
                  role: 'god'
                },
                // width: '80%',
                success: () => {
                  console.log('insert image success')
                }
              })
            }//*/
          },error(result){
            console.log(result)
          }
        });
      }
    })
  },