我们在做微信小程序开发设计时，在所难免碰到图片上传的作用，大家假如自身构建图片网络服务器得话，取得成功太大，而且还需要写任务管理器来接受上传的图片，还需要有网络存储器。好在微信小程序云开发为大家出示了云储存的作用，那样大家就可以轻轻松松的完成小程序图片的上传和储存。
规矩，首先看设计效果图
这节知识要点
- 1，小程序图片的选择
- 2，小程序图片的上传
- 3，小程序图片的储存
- 4，获得云空间图片并表明
下边就来实际解读下实际完成流程
图片的选取和上传
index.wxml文件如下所示
<view class=’item_root’ bindtap=’chuantupian’>
<text>{{zhaopian}}</text>
<view class=’right_arrow’ />
</view>
index.js文件如下
//上传图片
chuantupian() {
let that = this;
let timestamp = (new Date()).valueOf();
wx.chooseImage({
success: chooseResult => {
wx.showLoading({
title: ‘上传中……’,
})
// 将图片上传至云储存空间
wx.cloud.uploadFile({
// 特定上传到的云途径
cloudPath: timestamp ‘.png’,
// 特定要上传的资料的微信小程序缓存文件途径
filePath: chooseResult.tempFilePaths[0],
// 取得成功调整
success: res => {
console.log(‘上传取得成功’, res)
wx.hideLoading()
wx.showToast({
title: ‘上传图片成功’,
})
if (res.fileID) {
that.setData({
zhaopian: ‘图片如下所示’,
imgUrl: res.fileID
})
}
},
})
},
})
},
到这儿实际上大家就可以完成图片的选用和上传作用了。
下边讲下实际是怎样完成的
- 最先让我们根据wx.chooseImage来获得相册图片里的图片
- 再获得相片取得成功后，大家用当前时间戳取名图片，随后应用 wx.cloud.uploadFile方式来完成图片的上传
- 在上传取得成功后，会出现如下所示调整。下面的图中的filenId便是我们在云储存中的途径，可以直接的用这一途径来获得图片并表明的。
到这儿大家就简单的达到了小程序图片上传的作用，是否非常简单。
程序编写小石子，程序员一枚，非知名全栈工程师工作人员。共享自身的一些工作经验，学习体会，期待之后人事半功倍，少填大坑。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
