uni-app 支付宝云 uniCloud.uploadFile 返回的只有 fileID 无法直接显示

发布于 1周前 作者 phonegap100 来自 uni-app

uni-app 支付宝云 uniCloud.uploadFile 返回的只有 fileID 无法直接显示

产品分类

uniCloud/支付宝小程序云

示例代码

await uniCloud.uploadFile({  
    filePath: this.avatarUrl,  
    cloudPath: `user/avatar/${this.userInfo?._id}-${Date.now()}.jpg`,  
    cloudPathAsRealPath: true,  
    onUploadProgress: function({  
        loaded,  
        total  
    }) {  
        var percentCompleted = Math.round((loaded * 100) / total);  
        uni.showLoading({  
            title: `正在上传中${percentCompleted}%`  
        })  
    },  
    success(res) {  
        debugger  
        callback(res.fileID)  
    },  
    fail(err) {  
        uni.showToast({  
            icon: "error",  
            title: '上传失败'  
        })  
    },  
    complete() {  
        uni.hideLoading()  
    }  
});

操作步骤

await uniCloud.uploadFile({  
    filePath: this.avatarUrl,  
    cloudPath: `user/avatar/${this.userInfo?._id}-${Date.now()}.jpg`,  
    cloudPathAsRealPath: true,  
    onUploadProgress: function({  
        loaded,  
        total  
    }) {  
        var percentCompleted = Math.round((loaded * 100) / total);  
        uni.showLoading({  
            title: `正在上传中${percentCompleted}%`  
        })  
    },  
    success(res) {  
        debugger  
        callback(res.fileID)  
    },  
    fail(err) {  
        uni.showToast({  
            icon: "error",  
            title: '上传失败'  
        })  
    },  
    complete() {  
        uni.hideLoading()  
    }  
});

预期结果

返回URL

实际结果

返回有且fileID

Bug描述

阿里云uniCloud.uploadFile返回的只有fileID，image的src不能直接显示这个fileID。

为什么就不能和其他云一样正常返回图片信息？非要再getFileInfo，有这个必要吗？不要光为了兼容平台，要站在开发者角度去兼容，搞得哀声一片的，好玩吗？uniCloud下面还没有getFileInfo，去看看文档特么怎么写的！！！！还要商业版的才能用，有毛病简直了真的，一步一个坑~，如果是一个图片列表，难道要每个都要getTempFileURL？？？？

图片


Harmonyos Next教程
4 回复

标题是不是写错了，你这个是支付宝云把？
只有阿里云的fileID是可以直接访问的，腾讯云和支付宝云的不能直接访问，需要请求getTempFileURL，如果是公共权限的文件，则请求的getTempFileURL得到的连接地址是永久的（同时支付宝云需要去掉?之后的参数）
因为支付宝云和腾讯云有私有权限文件的功能


老师，求指导 1、如果是图片列表，那岂不是要每个图片都要getTempFileURL? 2、getTempFileURL获取到的地址是有过期时间的，去掉?之后的参数也可以访问，是永久访问吗？那返回这个fileID的作用就是多此一举了吖

回复 4***@qq.com: 但是私有权限的文件不能去掉？的，只有公共权限的文件可以去掉？所以并不是多此一举

在uni-app中使用支付宝云的uniCloud.uploadFile接口上传文件时，确实会遇到返回结果只有fileID而没有直接可用的文件URL的问题。这是因为文件被上传到了云存储中，而fileID是云存储中对该文件的唯一标识。为了能够在前端直接显示该文件，我们需要通过一定的步骤来获取文件的访问URL。

以下是一个示例代码，展示了如何在uni-app中实现文件上传并获取文件的访问URL：

  1. 上传文件到支付宝云存储：
uniCloud.uploadFile({
    cloudPath: 'example_dir/' + Date.now() + '_' + file.name, // 云存储路径，可自定义
    file: file, // 文件对象，通常来自<input type="file">的选择
    success: res => {
        console.log('上传成功', res);
        // res.fileID 是云存储中的文件唯一标识
        const fileID = res.fileID;
        
        // 接下来，我们需要通过fileID获取文件的访问URL
        getFileURL(fileID);
    },
    fail: err => {
        console.error('上传失败', err);
    }
});
  1. 通过fileID获取文件的访问URL：

由于支付宝云的uniCloud API没有直接提供通过fileID获取URL的接口，我们通常需要在云函数中处理这一逻辑。以下是一个简单的云函数示例，用于获取文件的访问URL：

云函数代码（Node.js）：

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

cloud.init();

exports.main = async (event, context) => {
    const { fileID } = event;
    const db = cloud.database();
    const _ = db.command;

    // 这里假设你有一个存储fileID和URL映射的集合，实际情况可能不同
    // 在这里，我们直接通过支付宝云的API或SDK获取URL（具体实现需参考支付宝云文档）
    // 由于API限制，这里仅作为示例，实际代码需根据API调整
    
    // 假设获取URL的函数为getFileURLFromID(fileID)
    // const fileURL = await getFileURLFromID(fileID); // 伪代码，需实现

    // 示例返回（需替换为实际URL）
    return {
        url: 'https://example.com/your-file-url' // 替换为实际获取到的URL
    };
};

注意：上述云函数代码中的getFileURLFromID函数是一个伪代码，实际实现需要参考支付宝云的官方文档，使用其提供的API或SDK来获取文件的访问URL。

  1. 在前端调用云函数并显示文件：

前端调用云函数，获取文件的URL后，即可将其绑定到<img>标签的src属性或其他需要显示文件的地方。

由于具体实现依赖于支付宝云的API和SDK，上述代码仅提供了框架性的指导。在实际开发中，请根据支付宝云的最新文档进行调整和实现。

回到顶部