基于umi使用ChatUI Pro(7) 加号扩展和上传图片_待完善

235 阅读1分钟

1.配置加号扩展

        //配置项
        toolbar: [
          {
            type: 'speech',
            icon: 'mic',
            title: '语音输入'
          },
          {
            type: 'image',
            icon: 'image',
            title: '相册',
          },
          {
            type: 'scroll',
            icon: 'image',
            title: '回到底部',
          },
        ],

2.以上传图片配置

    onToolbarClick: function (item, ctx) {
          console.log(item,'上传',ctx.util)
          //这里模拟发送消息,因为ctx.util.chooseImage未生效
            ctx.appendMessage( //客户发送消息
              {
                type: 'image',
                content: {
                  picUrl: 'https://gw.alicdn.com/tfs/TB1j2Y3xUY1gK0jSZFMXXaWcVXa-602-337.png'
                },
                position: 'right'
              },
            )
            ctx.postMessage( //后台发送消息
              {
                type: 'text',
                content: {
                  text:'aaa'
                },
                quiet: true // 不展示
              },
            );
          }
          
          // 如果点的是“相册”,官网给的案例,chooseImages不好使
          if (item.type === 'image') {
            ctx.util.chooseImage({
              // multiple: true, // 是否可多选
              
              success(e) {
                console.log(e,'eeee') //这里没有进入
                if (e.files) { // 如果有 h5 上传的图
                  const file = e.files[0];
                  // 先展示图片
                  ctx.appendMessage({
                    type: 'image',
                    content: {
                      picUrl: URL.createObjectURL(file)
                    },
                    position: 'right'
                  });

                  // 发起请求,具体自行实现,这里以 OCR 识别后返回文本为例
                  requestOcr({ file }).then(res => {
                    ctx.postMessage({
                      type: 'text',
                      content: {
                        text: res.text
                      },
                      quiet: true // 不展示
                    });
                  });

                } else if (e.images) { // 如果有 app 上传的图
                  // ..与上面类似
                }
              },
            });
          }