微信小程序云开发-上传图片实例

话不多说上布局
wxml

<view class="ple">
<view class="ple-k" style="margin-left:0" bindtap="chooseimg">
<block wx:if="{{upsrcfile==''}}">
<image src="/images/pic.png"></image>
</block>
<block wx:else>
<image src="{{upsrcfile}}" style="width:100%;height:100%;margin-top:0"></image>
</block>
</view>
<view class="clear"></view>
</view>

wxss

.ple{width: 100%;margin-top:calc(30vmin / 7.5);}
.ple-k{width: 45%;border: 1px solid #eee;text-align: center;height:calc(400vmin / 7.5);margin-left: 9%;float: left; }
.ple-k image{width:calc(150vmin / 7.5); height: calc(150vmin / 7.5);margin-top:calc(125vmin / 7.5) ;}

js文件
点击事件设置
使用微信自带api wx.chooseImage 选择图片

chooseimg: function (e) {
var that = this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中...',
mask: true
})
//返回临时路径
const filePath = res.tempFilePaths[0]
var timestamp = Date.parse(new Date());
//生成时间戳
const cloudPath = "upvideo/" + timestamp + filePath.match(/.[^.]+?$/)[0]
//设置云开发存储图片地址
//使用wx.cloud 调用云开发上传图片api 参数文件存放地址，图片路径
wx.cloud.uploadFile({
cloudPath,
filePath,
success: function (res) {
console.log(res)
wx.hideLoading();
that.setData({
upsrcfile: res.fileID
})
}
})
}
})
},

上传视频 使用 wx.chooseVideo api选择视频 使用wx.cloud.uploadFile文件上传方法，以此类推

谢谢观看，留个关注吧
后面会更新更多实例

最后

以上就是生动帆布鞋为你收集整理的微信小程序云开发-上传图片实例的全部内容，希望文章能够帮你解决微信小程序云开发-上传图片实例所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。