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

话不多说上布局
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文件上传方法，以此类推

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