江苏龙网

  1. 主页 > 生活百科 > >

小程序图片上传组件有哪些，小程序上传图片路径及规格大小

我们正在做一个小节目 。
开发时，难免会遇到图片上传的功能，我们如果自己搭建图片服务器的话，成功太大了，并且还要写后台程序来接收上传的图片，还要有存储服务器 。好在小程序云开发为我们提供了云存储的功能，这样我们就可以轻松的实现小程序图片的上传和存储 。
老规矩，先看效果图 。
本节知识点1，小程序图片的选取 2，小程序图片的上传 3，小程序图片的存储 4，获取云端图片并显示下面详细解释一下具体的实现步骤 。
图片的选择和上传index.wxml文件如下所示
{ {照片}}

index.js文件如下所示
//上传图片
川图片(){
让那个=这个；
设时间戳=(新日期()) 。value of()；
【小程序图片上传组件有哪些，小程序上传图片路径及规格大小】wx.chooseImage({
成功:选择结果=> {
wx.showLoading({
标题:“正在上传…”，
})
//上传图片到云存储室空
wx.cloud.uploadFile({
//指定要上传到的云路径
cloudPath:时间戳+' 。巴布亚新几内亚'，
//指定要上传文件的applet临时文件路径 。
file path:choose result . tempfile paths[0]，
//回调成功
成功:res => {
Console.log('上传成功'，res)
wx.hideLoading()
wx.showToast({
标题:“上传图片成功”，
})
if (res.fileID) {
that.setData({
赵片:‘图片如下’，
imgUrl: res.fileID
})
}
},
})
},
})
},
其实在这里我们就可以实现选图上传的功能 。
先说说是怎么实现的 。
首先我们通过wx.chooseImage来获取相册里的图片 再获取照片成功后，我们用当前时间戳命名图片，然后使用 wx.cloud.uploadFile方法来实现图片的上传 在上传成功后，会有如下回调 。下图中的filenId就是我们在云存储中的路径，可以直接用这个路径来获取图片并显示的 。这里我们已经轻松实现了上传小程序图片的功能，是不是很简单？
小编程石头，一个码农，不是著名的全栈开发者 。分享一些自己的经历和学习心得，希望后人少走弯路，少填坑 。


    推荐阅读


    上一篇：营销策划公司排名，十大营销策划公司排行榜

    下一篇：亨利·卡维尔|亨利卡维尔是被开除？DC执行长不忍了「亲口证实」超人辞演原因