E企盈小程序营销工具技术服务商 热线:4006-838-530

微信小程序图片上传(开发实例)

E企盈小程序直播系统

图片上传服务器:wxml<view class=”container”>  <button bindtap=’chooseImageTap’>上传图片</button></view>wxssPage({  /**   * 页面的初始数据   */  data: {    imgs: [],//本地图片地址数组    picPaths:[],//网络路径  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {      },  //添加上传图片  chooseImageTap: function () {    var that = this;    wx.showActionSheet({      itemList: [‘从相册中选择’, ‘拍照’],      itemColor: “#00000”,      success: function (res) {        if (!res.cancel) {          if (res.tapIndex == 0) {            that.chooseWxImage(‘album’)          } else if (res.tapIndex == 1) {            that.chooseWxImage(‘camera’)          }        }      }    })  },  // 图片本地路径  chooseWxImage: function (type) {    var that = this;    var imgsPaths = that.data.imgs;    wx.chooseImage({      sizeType: [‘original’, ‘compressed’],      sourceType: [type],      success: function (res) {        console.log(res.tempFilePaths[0]);        that.upImgs(res.tempFilePaths[0], 0) //调用上传方法      }    })   },  //上传服务器  upImgs: function (imgurl, index) {    var that = this;    wx.uploadFile({      url: ‘https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx’,//      filePath: imgurl,      name: ‘file’,      header: {        ‘content-type’: ‘multipart/form-data’      },      formData: null,      success: function (res) {        console.log(res) //接口返回网络路径        var data = JSON.parse(res.data)          that.data.picPaths.push(data[‘msg’])          that.setData({            picPaths: that.data.picPaths          })          console.log(that.data.picPaths)      }    })  },})思路很简单,多张上传的话,在 upImgs 方法回调做判断 index++ 继续调用 upImgs方法即可 喜欢上方小程序,需要源码的,添加博主微信私信小编.小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序图片上传(开发实例)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏