uniapp，接口返回文件流，APP开发，前端如何处理流，并保存？

Question

uniapp，接口返回文件流，APP开发，前端如何处理流，并保存？

Answer 1

小文件用 uni.request

uni.request({
  url: 'your-api-url',
  method: 'GET',
  responseType: 'arraybuffer', // arraybuffer
  header: {
    'Content-Type': 'application/octet-stream'
  },
  success: (res) => {

    const fileName = 'download.pdf' 
 
    // 保存
    const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`
    
    // 写入
    const fs = uni.getFileSystemManager()
    fs.writeFile({
      filePath: filePath,
      data: res.data,
      encoding: 'binary',
      success: () => {
        console.log('文件保存成功')
        // 打开文件
        uni.openDocument({
          filePath: filePath,
          success: () => {
            console.log('打开文件成功')
          }
        })
      },
      fail: (err) => {
        console.error('保存文件失败', err)
      }
    })
  }
})

大文件用 uni.downloadFile :

uni.downloadFile({
  url: 'your-api-url', 
  header: {
    // 设置请求头
  },
  success: (res) => {
    if (res.statusCode === 200) {
      // 下载成功后的临时路径
      const tempFilePath = res.tempFilePath
      
      // 保存到本地
      uni.saveFile({
        tempFilePath: tempFilePath,
        success: (res) => {
          const savedFilePath = res.savedFilePath
          console.log('文件保存成功', savedFilePath)
          
          // 打开文件
          uni.openDocument({
            filePath: savedFilePath,
            success: () => {
              console.log('打开文件成功')
            }
          })
        },
        fail: (err) => {
          console.error('保存失败', err)
        }
      })
    }
  },
  fail: (err) => {
    console.error('下载失败', err)
  }
})

Answer 2

看你这个流文件是要做什么，是要下载就是按照网上方法创建一个a标签，然后模拟点击a标签，执行下载就行了，

  const file = new File([res], res.name, { type: res.type })
  const downLoadUrl = URL.createObjectURL(file)
  const link = document.createElement('a')
  link.href = downLoadUrl
  link.download = "name"
  link.click()

如果说你这个流是一个图片什么得要在界面展示就用
window.URL.createObjectURL(file)
将流转化为一个路径就可以在界面上展示了