使用uniCloud免费接了一个在线相册管理工具，可以作为图床的外链尤其是在写markdown的时候，为了让我们的文章“图文并茂”不那么枯燥，我们经常需要在适当的地方插入一些相关的图片。据(xia)说，(shuo)图片还可以有效减轻读者的视觉疲劳，给大脑一个短暂的缓冲作用。然而，在markdown中插入图像在很大程度上取决于图像是否可以在线访问。如果没有专门的图片管理工具，插入图片真的很郁闷。前言得益于云开发理念的兴起，前端小伙伴的全栈之路变得轻松了许多。无需架设服务器，无需管理数据库，无需购买OSS，甚至无需学习Linux；当然，最重要的是，这一切都变得“免费”了！不管是阿里云还是腾讯云，每个月都有一个免费额度。即使超出配额，按量计费也非常划算。反正我没有超过。uniCloud是基于阿里云和腾讯云的面向开发者的云开发平台。为什么选择联云？主要是得益于uni家族的整个生态，才能够完美对接。从开发到部署的整个过程都为你准备好了，用它就对了。2.1开始创建工程，可以选择uni推荐的HBuilderX来创建，也可以选择cli命令行方式。有关详细信息，请参阅官方文档。下面是通过cli命令行创建vite+ts+vue3的项目模板：npxdegitdcloudio/uni-preset-vue#vite-tsmy-vue3-project2.2创建云服务空间进入uniCloud控制台即可创建服务空间，可以自由选择阿里云和腾讯云，推荐选择阿里云。然后通过HBuilderX打开之前创建的项目，右键点击项目根目录，选择创建uniCloud云开发环境，然后选择阿里云或者腾讯云进行创建。最后在uniCloud文件夹上右击，关联到之前创建的云服务空间。2.3上传图片的主要步骤是先通过uni.chooseImage方法选择一张本地图片，然后使用uniCloudAPIuniCloud.uploadFile方法将图片上传到云存储。调用uniCloud的API，首先要在项目中进行初始化，即关联到你开通的云空间。uniCloud初始化：//...其他代码已省略onLaunch(){//云空间初始化uniCloud.init({provider:'aliyun',spaceId:'xxxxxxxxxxxxxxxxxxxxxxxxxxx',clientSecret:'xxxxxxxxxxxxxxxxxxxxxxxxxxx',});},spaceId和clientSecret到uniCloud控制台获取。上传图片到云存储：constres=awaituniCloud.uploadFile({filePath:file.path,cloudPath:`${hash}/${file.name}`,onUploadProgress:(res)=>{const{loaded,total}=res;console.log(loaded,total);this.$set(this.imgList[0],'uploadPercent',(loaded/total)*100);},});console.log('文件上传成功',res);为了防止文件重复上传，上传前计算文件的MD5码作为哈希值，与上传文件的哈希值进行比较。当然这个功能可以做也可以不做，无伤大雅。2.4将图片信息存入数据库如果您希望将所有上传的图片信息保存起来以方便下次使用或不同设备间同步，则必须将每次上传后的图片地址和图片相关信息保存在云端数据库中。好在uniCloud的数据库也是免费的，没必要白用。并且还支持在客户端直接操作数据库，云函数都保存起来，简直不要太方便。首先创建一个数据表，可以在uniCloud控制台中创建，也可以直接通过代码创建。为简单起见，建议直接到控制台创建，参考文档。前端直接操作数据库，需要定义表结构DBSchema，这样在插入数据的时候，可以自动校验一些字段。向数据库中插入图片信息：interfaceAlbum{_id?:string;名称：字符串；网址：字符串；哈希：字符串；创建时间？：数字；updateAt?:number;}exportfunctionsaveAlbum(data:Album){constcollection=uniCloud.database().collection('你创建的表名');returncollection.add(data).then(({result}:any)=>result);}2.5直接在代码上读取图片列表：interfaceAlbumListQueryextendsPartial
