[Mini Programe] Upload Images

Code for upload iamges:

chooseImage: choose the images to upload

previewImage: preview the image and enable slide 

复制代码
  chooseImage() {
    wx.chooseImage({
      count: 3,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        let currentImages = res.tempFilePaths

        this.setData({
          images: currentImages
        })
      },
    })
    
  },

  previewImg(event) {
    let target = event.currentTarget
    let src = target.dataset.src
    
    wx.previewImage({
      current: src,
      urls: this.data.images
    })
  },
复制代码

 

Upload to the server:

复制代码
  uploadImage(cb) {
    let commentImages = this.data.commentImages
    let images = []

    if (commentImages.length) {
      let length = commentImages.length
      for (let i = 0; i < length; i++) {
        wx.uploadFile({
          url: config.service.uploadUrl,
          filePath: commentImages[i],
          name: 'file',
          success: res => {
            let data = JSON.parse(res.data)
            length--

            if (!data.code) {
              images.push(data.data.imgUrl)
            }

            if (length <= 0) {
              cb && cb(images)
            }
          },
          fail: () => {
            length--
          }
        })
      }
    } else {
      cb && cb(images)
    }
  },

  onInput(event) {
    this.setData({
      commentValue: event.detail.value.trim()
    })
  },

  chooseImage() {
    let currentImages = this.data.commentImages

    wx.chooseImage({
      count: 3,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: res => {

        currentImages = currentImages.concat(res.tempFilePaths)

        let end = currentImages.length
        let begin = Math.max(end - 3, 0) // latest three pictures
        currentImages = currentImages.slice(begin, end)

        this.setData({
          commentImages: currentImages
        })

      },
    })
  },
复制代码

 

posted @   Zhentiw  阅读(325)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2016-08-01 [React Native] Build a Github Repositories component
2014-08-01 [Backbone]5. Model & View, toggle between Models and Views -- 2
2014-08-01 [Backbone]4. Model & View, toggle between Model and View. -- 1
2014-08-01 [Backbone]3. More detail on View
2014-08-01 [Backbone]2. More detail in Models
2014-08-01 [Backbone]1. Module, View classed
2014-08-01 [Node.js]33. Level 7: Persisting Questions
点击右上角即可分享
微信分享提示