话不多说上布局
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文件上传方法,以此类推
谢谢观看,留个关注吧
后面会更新更多实例