AI智能问答种遇到的常见问题(前端版处理二进制数据转化为图片根据返回的data.type table的查看插槽 3.实

处理二进制数据转化为图片根据返回的data.type

  if (data.type === "application/json") {
            parseJsonFromBlob(data).then(jsonData => {
                console.log("解析后的 JSON 数据:", jsonData);
              })
              .catch(error => {
                console.error("JSON 解析失败:", error);
              });
          } else if (data.type === "application/octet-stream") {
          //创建Blob对象,`Blob`对象表示一段二进制数据，可以用来处理文件数据
            const typedBlob = new Blob([data], {
              type: 'image/jpg'
            });
            // 创建Blob的URL, 创建一个表示`typedBlob`对象的URL。这个URL可以用于在网页中引用这个Blob对象，比如在`<img>`标签中设置`src`属性来显示图片。
           const imageUrl= URL.createObjectURL(typedBlob)
           this.previewImage = imageUrl
           this.previewVisible = true
          }

table的查看插槽

const columns = [
    {
      title: '图片',
      dataIndex: 'pictureUrl',
      scopedSlots: { customRender: 'pictureUrl' },
      width:'10%'
    },
    ]
 <s-table>
   <span slot="pictureUrl" slot-scope="text, record">
        <template>
          <a @click="lookImg(record)">查看</a>
        </template>
   </span>
 </s-table>

3.实现平滑滚动到元素底部的

 import { throttle } from 'lodash'; // 使用lodash的throttle函数来限制事件处理函数的调用频率，避免性能问题
  //滚动到底部事件
  const scrollToBottom = throttle(() => {
    nextTick(() => {
      let element = document.getElementById('chatData-list');
      element.scrollTo({ top: element.scrollHeight - element.clientHeight, behavior: 'smooth' }); // 平滑滚动到底部
    })
  }, 100) // 防抖