小程序云开发实现图片上传功能

1.wxml触发选择图片事件

<button type="primary" bindtap="_choseImage">选择头像</button>

2.选择图片

 // 选取图片
  _choseImage() {
     
    let _this = this;
    wx.chooseImage({
     
      count: 1, // 最多9张
      sizeType: ['original', 'compressed'],// 原图  缩略图
      sourceType: ['album', 'camera'], // 相册  相机拍照
      success(res) {
     
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths // 返回数组
        _this.setData({
     
          src: tempFilePaths[0]
        })
      }
    })
  },

3.执行上传

_submit() {
     
 	let src = this.data.src;
    let extName = src.split(".").pop();
    let cloudPath = "web/" + new Date().getTime() + "." + extName;
    wx.cloud.uploadFile({
     
      cloudPath,
      filePath: src, // 文件路径
    }).then(res=>{
     
    }).catch(err=>{
     })
  },

你可能感兴趣的:(前端框架,小程序,微信小程序)