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

【微信小程序遇到的坑】实现上传图片,点击查看大图

E企盈直播平台营销卖货系统

一:上传图片jsconst app = getApp();Page({  /**   * 页面的初始数据   */  data: {    pic: ”,  },  //上传单张图片  addPic(e) {    var that = this;    wx.chooseImage({      count: 1, // 默认9      sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有      sourceType: [‘album’, ‘camera’],      success: res = {        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片        var tempFilePaths = res.tempFilePaths;        upload(that, tempFilePaths)        //头像        that.setData({          textPic: tempFilePaths        })      },      fail: res = {        console.log(“error:” + res)      }    })  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function(options) {  },})//通用的上传图片方法//page 等价于 this.data.参数名中的 this//path 为图片临时路径function upload(page, path) {  wx.showToast({      icon: “loading”,      title: “正在上传”    }),    wx.uploadFile({      url: “服务器上传地址”,      filePath: path[0],      name: ‘file’,、、服务器接收的文件的名字      header: {        “Content-Type”: “multipart/form-data”,        “Authorization”: wx.getStorageSync(‘Authorization’),      },      formData: {        //服务器需要的额外参数        ‘type’: ‘base’      },      success: function(res) {        let data = res.data;        let pic = data.data.path        console.log(pic)        if (res.statusCode != 200) {          wx.showModal({            title: ‘提示’,            content: ‘上传失败’,            showCancel: false          })          return;        }        //将图片存起来        page.setData({          pic: pic        })      },      fail: function(e) {        console.log(e);        wx.showModal({          title: ‘提示’,          content: ‘上传失败’,          showCancel: false        })      },      complete: function() {        wx.hideToast(); //隐藏Toast      }    })}在 wxml 中对相应的上传btn进行绑定 addPic 事件即可。二:查看大图js  //预览单个图片  previewMoreImage(e) {    let src = e.currentTarget.dataset.src;    let urlarr = [];    urlarr.push(src)    wx.previewImage({      current: src,      urls: urlarr    })  },wxml//data-src为预览图路径image src=’http://os01.mddyg.com/picture/base/1530684511155_stfSXU’ data-src=’http://os01.mddyg.com/picture/base/1530684511155_stfSXU’ mode=”widthFix” bindtap=’previewMoreImage’ class=”service_img”/image

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【微信小程序遇到的坑】实现上传图片,点击查看大图
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏