uniCloud上传图片到云储存

上传图片到云储存"/>

uniCloud上传图片到云储存

uniCloud上传图片到云储存

• 准备的条件
• • • • 创建项目
      • • 右击cloudfunctions文件,创建云函数
  • 创建服务空间
  • 本地创建云函数
  • • • • • ctrl + r 创建云函数
    • 了解uploadFile,uniCloud.deleteFile，以及基本的云函数操作云数据库

准备的条件

创建项目

在编辑器中创建项目,我使用的是阿里云服务器，腾讯云的也可以,我看文档中用腾讯云有更多的操作，我没有试过，创建完的项目cloudfunctions就是我们需要写云函数的地方

右击cloudfunctions文件,创建云函数

'use strict';
exports.main = async (event, context) => {//event为客户端上传的参数console.log('event : ', event)//返回数据给客户端return event
};

创建服务空间

uniCloud 的 web控制台地址:

需要个人信息认证,个人和企业两种，我选择的个人，需要上传自己的身份证正反面,然后跟着提示,添加信息，然后就是创建服务空间，
选择阿里云,还是腾讯云,腾讯云需要认证其他的信息,然后想节约时间,我选择的是阿里云

选择创建好的服务空间,我创建的名称为tao,当我们在web控制台创建好服务空间,在编辑器中右击cloudfunctions, 点击选择服务空间就可以选择创建的服务空间

本地创建云函数

ctrl + r 创建云函数

粘贴复制下方的代码

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
//连接数据库const db = uniCloud.database();
//获取指令const dbCmd = dbmand
//db.collection('product_list') 连接product_list表 获取所有的数据,连接自己创建的表,let res = await db.collection('product_list').get()return res // 返回json给客户端
};

了解uploadFile,uniCloud.deleteFile，以及基本的云函数操作云数据库

uploadFile：直接上传文件到云存储。客户端上传文件到云函数、云函数再上传文件到云存储，这样的过程会导致文件流量带宽耗费较大。所以一般上传文件都是客户端直传。
uniCloud.deleteFile：云函数删除云存储文件。删除云存储文件是高危操作，不建议在客户端操作，而建议在云函数中操作。
vue或者nvue

uni.chooseImage({count: 1, //默认9sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function(res) {let filePath = res.tempFilePaths[0];const result = uniCloud.uploadFile({filePath: filePath,cloudPath: String(Math.random()*5).split('.')[1] + '.png',})result.then(res => {//获取到上传到云储存的url地址 consloe.log(res['fileID'])uniCloud.callFunction({ //客户端调用云函数，云函数调用数据库name: 'product_list', //在云函数中的函数名,也就是创建的云函数的文件夹的名字data:{_id:_id, //需要给那条数据使用,_id是主键,不会重复的fileID:res['fileID'],//图片的url地址},success: (res) => {},error: function(e) {}})})}})

云函数

'use strict';
// 上传商品的图片
exports.main = async (event, context) => {//event中就可以接收到 前台传过来的参数const db = uniCloud.database();const dbCmd = dbmand // 取指令  if(!event._id) {return '缺少字段'}const collection = db.collection('product_list');let res = await collection.where({"_id":event._id}).update({"img": event.fileID});}return res};