uni-app 云对象文件鼠标右键点击下载云函数后点击叉号 居然是默认下载

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 云对象文件鼠标右键点击下载云函数后点击叉号 居然是默认下载

bug描述:

在云对象文件鼠标右键点击下载云函数后会弹对话窗,然后点击右上角叉号关闭,居然是默认下载…不应该点叉号默认取消吗?. 把我本地几天改的代码全部覆盖了.崩溃了

image

1 回复

uni-app 中使用云开发功能时,可能会遇到一些与云对象文件下载相关的操作问题。根据你的描述,你在使用云对象文件的下载功能时,发现鼠标右键点击下载云函数后,系统默认执行了下载操作,而不是弹出常规的右键菜单。这种情况可能是由于事件处理机制或者特定的库/框架行为导致的。

为了解决这个问题,我们可以通过编写一个云函数来实现文件下载,并在前端通过标准的HTTP请求来触发这个下载操作。这样,我们可以更好地控制下载行为,避免不期望的默认行为。

下面是一个简单的示例,展示如何在 uni-app 中使用云函数下载文件:

云函数(Node.js)

首先,在云函数中创建一个处理文件下载的函数。假设你的文件存储在云存储中。

// 云函数入口文件
const cloud = require('wx-server-sdk')
const fs = require('fs')
const path = require('path')

cloud.init()

exports.main = async (event, context) => {
  const cloudPath = 'your-cloud-storage-path/your-file.txt' // 云存储中的文件路径
  const tempFilePath = `/tmp/${path.basename(cloudPath)}` // 临时文件路径

  try {
    // 从云存储下载文件到临时目录
    await cloud.downloadFile({
      fileID: cloudPath,
      tempFilePath: tempFilePath,
    })

    // 返回文件内容作为下载响应
    const fileContent = fs.readFileSync(tempFilePath)
    const base64Content = fileContent.toString('base64')

    return {
      statusCode: 200,
      headers: {
        'Content-Type': 'application/octet-stream',
        'Content-Disposition': `attachment; filename="${path.basename(cloudPath)}"`,
      },
      body: base64Content,
      isBase64Encoded: true,
    }
  } catch (error) {
    console.error(error)
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message }),
    }
  } finally {
    // 清理临时文件
    if (fs.existsSync(tempFilePath)) {
      fs.unlinkSync(tempFilePath)
    }
  }
}

前端代码(uni-app)

在前端,你可以使用 uni.request 方法来触发云函数下载文件。

uni.request({
  url: 'https://your-cloud-function-url/download', // 云函数URL
  method: 'POST',
  success: (res) => {
    if (res.statusCode === 200) {
      const blob = wx.arrayBufferToBase64(res.data)
      const link = document.createElement('a')
      link.href = `data:application/octet-stream;base64,${blob}`
      link.download = 'downloaded-file.txt' // 下载文件名
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    } else {
      console.error('Download failed:', res.data)
    }
  },
  fail: (err) => {
    console.error('Request failed:', err)
  },
})

这个示例展示了如何通过云函数下载文件,并在前端处理下载响应,从而避免默认的下载行为。

回到顶部