react上传文件到uniCloud(云服务器)的实现

前言

uniCloudDCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台,在uniapp的环境下,使用其内置的uniCloud提供的方法/函数,能够直接或使用云函数/云对象间接的控制云服务器的数据库云存储空间等。同时,若使用react搭建项目的后台管理系统时,可使用云服务器的云函数提供的url地址,去请求该云函数的接口,通过传参实现一体化开发。

但是,uniCloud无法通过url调用接口传参的方式直接将文件通过参数传递给云函数/云对象。即,阿里云无法在直接将文件上传到uniCloud的云存储空间,而腾讯云有一个插件。若想要实现从react后台管理界面实现文件的上传与下载,则需要使用第三方插件,阿里云的 ali-oss 插件 配置uniCloud数据信息

原理

uniCloudhbuilder联合阿里云和腾讯云的serverless,推出的uniCloud平台,并不是一个serveless服务器 !!!!! (也就是uniCloud是对serveless操作的平台)

但是,其原理是使用uniCloud的方法,访问阿里云的serveless,也就是发送请求给serveless,存储、拿取数据或上传和下载文件;即:uniCloud的云存储空间是指的是阿里云/腾旭云的serveless服务器的云存储空间。

注:正常的操作uniCloud云存储空间的过程: 用户 --> uniCloud --> (serveless)云存储空间

若需要在uniapp之外使用uniCloud的云存储空间,可以使用uniCloud提供的参数数据配合插件直接对serveless服务器进行操作。即: 用户 --> (serveless)云存储空间

阿里云上传文件原理:使用阿里云的 ali-oss 插件 配置uniCloud数据信息,进行上传。但是,该插件并不能直接使用,因为其内部调用的方法,返回的参数不一定是uniCloud上传文件需要的参数数据信息。因此,需要对该插件的文件进行修改。

注:uniCloud的参数是在uniCloud服务器空间首页查看。

该插件上传总体上传文件分为三次请求:

markdown 复制代码
 (第一次请求和第二次请求的接口一样,第一次不带参数,第二次带参数,拿到不同的结果)
    1,发送请求,获取keyID  ;
    2,发送请求,获取token 和 签名;       
    3,发送上传文件的接口,需要第二次获取的token和签名,返回上传结果和文件的下载地址 

实现

通过对文件进行修改,达到需要的使用要求,即:在react上上传和下载uniCloud的云存储空间的文件。插件修改后存放在我的gitee上,需要的可以使用git下载;地址:https://gitee.com/longingfortheworld/theUniCloud/tree/master

typescript 复制代码
    // yyy是案例
    
    // 插件的使用
    // 使用配置好的文件 :     
    const fs = require("fs")

    // 导入包
    const SX = require('./unicloud2aliss');
    // 初始化(两个必传参数)
    const spaceId = "mp-a7023582-0024-4f1c-9666-2986b225541b"                   
    // uniCloud上的 spaceId
    const clientSecret = "H41MC7vgkJtHep9YRvHMRQ=="

    const unics = new SX(spaceId, clientSecret);

    const file = fs.readFileSync("./03.jpg")
    const file_name = "1234567.jpg"

    unics.upload(file, file_name).then(res=>{
        console.log("上传成功")
        console.log(res)
    }).catch(err=>{
        console.log("上传时报")
        console.log(err)
    })

总结

uniCloudDCloud 联合阿里云、腾讯云,为开发者提供的基于 serverless 模式和 js 编程的云开发平台。最终数据是存储到serveless云服务器的,也就是uniCloud调用的方法也都是调用的serveless的云服务器接口,同时,uniCloud的服务器空间提供的云函数url,不能直接传参文件,因此,无法在第三方直接上传和下载文件。但是可以使用第三方插件直接访问serveless,注:使用uniCloud云空间的参数,上传。

相关推荐
DoraBigHead1 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
刻意思考4 小时前
服务端和客户端之间接口耗时的差别
后端·程序员
京东云开发者4 小时前
Hudi系列:Hudi核心概念之时间轴(TimeLine)
程序员
大模型教程4 小时前
万字详解让大模型写出好代码:上下文窗口的工程化实践
程序员·llm·agent
大模型教程5 小时前
AI大模型从0到1:你的90天蜕变计划,告别小白直通前沿!
程序员·llm·agent
AI大模型5 小时前
RAG彻底爆了!一文读懂其架构演进及核心要点
程序员·llm·agent
京东云开发者5 小时前
Hudi系列:Hudi核心概念之文件布局(Storage Layouts)
程序员
Jerry_Rod5 小时前
react+umijs 项目快速学习
前端·react.js
AliPaPa6 小时前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
AI大模型7 小时前
用Macbook微调Qwen3!手把手教你用微调给Qwen起一个新名字
程序员·llm·agent