uniapp blob is not defined 如何解决

在uniapp开发中遇到报错"blob is not defined"，请问该如何解决？尝试过在H5端正常使用Blob对象，但在小程序和App端就报这个错误。需要在不支持Blob的环境下实现文件下载功能，求兼容多端的解决方案。

2 回复

在uni-app中，blob is not defined 错误通常出现在H5端。解决方法：

  1. 检查运行环境：使用 uni.getSystemInfoSync().platform 判断是否为H5。
  2. 引入polyfill：在H5端引入 URL.createObjectURL 的polyfill。
  3. 使用uni.downloadFile：替代直接使用Blob对象。

推荐优先使用uni-app官方API处理文件操作。


在uni-app中出现blob is not defined错误，通常是因为在小程序环境中缺少Blob对象支持。以下是几种解决方案：

方案一：条件编译（推荐）

// 使用条件编译区分环境
downloadFile() {
  // #ifdef H5
  const blob = new Blob([data], { type: 'application/pdf' })
  const url = URL.createObjectURL(blob)
  // #endif
  
  // #ifdef MP-WEIXIN
  // 小程序环境使用其他方式
  uni.downloadFile({
    url: 'your_file_url',
    success: (res) => {
      // 处理下载的文件
    }
  })
  // #endif
}

方案二：使用uni.downloadFile替代

// 下载文件到本地
uni.downloadFile({
  url: 'https://example.com/file.pdf',
  success: (res) => {
    if (res.statusCode === 200) {
      // 文件临时路径
      const tempFilePath = res.tempFilePath
      // 打开文档
      uni.openDocument({
        filePath: tempFilePath,
        success: function() {
          console.log('打开文档成功')
        }
      })
    }
  }
})

方案三：环境检测

// 检测环境并选择相应方案
function downloadFile(data, filename) {
  // #ifdef H5
  if (typeof Blob !== 'undefined') {
    const blob = new Blob([data])
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = filename
    link.click()
  }
  // #endif
  
  // #ifdef MP-WEIXIN
  uni.showModal({
    title: '提示',
    content: '请使用浏览器打开下载',
    showCancel: false
  })
  // #endif
}

方案四：使用base64处理（适用于图片等）

// 将base64数据转换为临时文件路径
function base64ToTempPath(base64) {
  return new Promise((resolve, reject) => {
    const fs = uni.getFileSystemManager()
    const filePath = `${wx.env.USER_DATA_PATH}/temp_${Date.now()}.png`
    
    fs.writeFile({
      filePath,
      data: base64.replace(/^data:image\/\w+;base64,/, ''),
      encoding: 'base64',
      success: () => resolve(filePath),
      fail: reject
    })
  })
}

主要建议：

  1. 使用条件编译区分不同平台
  2. 优先使用uni-app官方API如uni.downloadFile
  3. 避免直接使用Blob在小程序环境
  4. 做好环境兼容性检查

根据你的具体使用场景选择合适的解决方案。如果是文件下载，推荐使用方案二；如果是数据处理，推荐使用方案一的条件编译。

回到顶部