微信小程序上传图片+图片预览

1.实现效果

2.实现原理

上传图片：wx.chooseImage()
预览图片：wx.previewImage()
上传文件到服务器 wx.uploadFile()

3.部分代码

data: {
    show:true,//显示选择图片的按钮
    imgList:[],
    maxPhoto:10,//最大上传10张图片
  },
  /**
   * 选择上传方式
   * @param {*} e 
   */
  chooseImg(){
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      success: (res)=> {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            this.chooseWxImage('album')//相册
          } else if (res.tapIndex == 1) {
            this.chooseWxImage('camera')//拍照
          }
        }
      }
    })
  },
  /**
   * 上传照片
   * @param {*} type 
   */
  chooseWxImage: function (type) {
    let {imgList, maxPhoto} = this.data
    if (imgList.length > 10) {
        wx.showToast({
            title: '最多上传10张',
            icon: 'none',
            duration: 2000
        })
        return
    }
    wx.chooseImage({
      count: maxPhoto-imgList.length,
      sizeType: ['original', 'compressed'],
      sourceType: [type],
      success: (res) =>{
        console.log(res)
        let tempFilePaths = res.tempFilePaths //成功后返回的的路径
        console.log(tempFilePaths)
        tempFilePaths.forEach(item=>{
          imgList.push(item)
        })
        this.setData({
          imgList:imgList,
          show: imgList.length >=10? false : true
        })
      }
    })
  },
  /*
    * 图片预览
    * @param e
    */
   previewImg(e){
    let currentUrl = e.currentTarget.dataset.src;
    let urls=this.data.imgList
    wx.previewImage({
      current: currentUrl, // 当前显示图片的http链接
      urls: urls// 需要预览的图片http链接列表
    })
  },
  /**
   * 删除上传的图片
   * @param e
   */
  deleteUpload(e) {
    let {index} = e.currentTarget.dataset,{imgList} = this.data
    imgList.splice(index, 1)
    this.setData({
      imgList:imgList,
      show: imgList.length >=10? false : true
    })
  }

4.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~