当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现图片上传

微信小程序实现图片上传

2019年07月19日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了android九宫格图片展示的具体代码，供大家参考，具体内容如下/p>

图片上传服务器：

wxml

<view class="container">
 <button bindtap='chooseimagetap'>上传图片</button>
</view>

wxss

page({
 
 /**
  * 页面的初始数据
  */
 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方法即可

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网