uni-app 云函数url上传图片后,在云存储中打不开且不显示

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

uni-app 云函数url上传图片后,在云存储中打不开且不显示

示例代码:

const result = await uniCloud.uploadFile({  
    cloudPath: Date.now() + '.jpg',  
    fileContent: new Buffer(body.avatar, 'base64')  
})

操作步骤:

在pc中使用FileReader读取当前的图片为base64格式,传递到云函数中,使用uniCloud.uploadFile上传,并将base64格式转buffer,上传成功,在控制台的云存储中,打开当前上传的图片,图片打不开直接不显示

预期结果:

上传成功并可以使用图片链接打开图片或者直接在云存储中预览图片

实际结果:

成功上传到云存储,但是图片打不开,下载到本地,也提示图片打不开

bug描述:

使用阿里云函数的url化,在pc端开发需要上传图片到云存储中,pc中获取到图片是base64格式,在云函数中使用uniCloud.uploadFile并将base64格式转为了buffer,提示上传图片成功,但是在云存储中图片打不开,使用链接也是,直接下载并且打不开


2 回复

你应该是在前端上传的吧,你传的参数看上去是云函数的参数。 看下客户端uploadFile文档:https://uniapp.dcloud.net.cn/uniCloud/storage.html#uploadfile


在使用 uni-app 云函数上传图片到云存储后,如果图片无法打开或显示,可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案:

1. 检查上传流程

  • 确保文件成功上传:在云函数中,确保文件已经成功上传到云存储。可以通过打印日志或返回上传结果来确认。
  • 检查文件路径:确保上传的文件路径正确,并且文件确实存在于云存储中。

2. 检查文件权限

  • 文件权限设置:云存储中的文件默认是私有的,如果文件权限没有正确设置为公开,可能会导致无法访问。你可以在云存储中手动设置文件权限为公开,或者在云函数中上传时设置文件权限。
  • 代码示例
    const cloud = require('wx-server-sdk')
    cloud.init()
    const fileStream = fs.createReadStream('path/to/your/image.jpg')
    const result = await cloud.uploadFile({
      cloudPath: 'your/cloud/path/image.jpg',
      fileContent: fileStream,
      config: {
        env: 'your-env-id'
      }
    })
    console.log(result.fileID)

3. 检查文件类型和大小

  • 文件类型:确保上传的文件类型是支持的图片格式(如 .jpg, .png, .gif 等)。
  • 文件大小:检查文件大小是否超过了云存储的限制。如果文件过大,可能会导致上传失败或无法正常显示。

4. 检查返回的 fileID

  • fileID 格式:云存储返回的 fileID 是一个字符串,通常以 cloud:// 开头。确保你正确使用了这个 fileID 来访问文件。
  • 访问文件:你可以通过 fileID 来访问文件,例如在前端使用 wx.cloud.getTempFileURL 获取临时访问链接。

5. 检查云函数配置

  • 云函数环境:确保云函数的环境配置正确,特别是 env 参数,它应该与你的云存储环境一致。
  • 云函数权限:确保云函数有权限访问云存储。

6. 调试和日志

  • 打印日志:在云函数中打印上传过程中的关键信息,如上传结果、文件路径、错误信息等,以便更好地定位问题。
  • 错误处理:确保在云函数中正确处理了可能的错误,并返回有意义的错误信息。

7. 前端访问

  • 获取临时链接:如果文件是私有的,前端需要通过 wx.cloud.getTempFileURL 获取临时访问链接。
  • 代码示例
    wx.cloud.getTempFileURL({
      fileList: [fileID],
      success: res => {
        console.log(res.fileList[0].tempFileURL)
      },
      fail: err => {
        console.error(err)
      }
    })
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!