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

前言

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

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

原理

 uniCloud是hbuilder联合阿里云和腾讯云的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)
    })

总结

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

相关推荐
kill5223 小时前
useRef
前端·javascript·react.js
西柚小萌新4 小时前
【LLM&&AI应用开发 八股文】--4.2.Agent智能体(中)
前端·javascript·react.js
Java后端的Ai之路4 小时前
03_React_JSX
前端·react.js·前端框架
newerp6 小时前
pprof 火焰图(Flame Graph)阅读与热点代码重构实战
后端·程序员·go
SimonKing8 小时前
Qoder中Qwen3.8-Flash 限时免费使用
java·后端·程序员
爱勇宝8 小时前
裁员裁掉了那个干了14年的人:我这才看清职场的5条潜规则
前端·后端·程序员
Hilaku8 小时前
GraphQL 在国内为什么水土不服?
前端·javascript·程序员
Codiggerworld9 小时前
寒露·Codigger
大数据·程序员·节日
CodeSheep9 小时前
朋友面试谈薪报价2w,HR非得压到1.9,还反问他:你就差这1000块钱?后来背调时问了他前同事十几个问题,对方最后直接挂了
前端·后端·程序员
阿瑞IT1 天前
企业知识库为什么越建越难用?从知识沉淀到权限检索的五种实现路径
程序员