首页 > 课堂 > 小程序 > 正文

微信小程序实现图片上传

2020-03-21 15:55:27
字体:
来源:转载
供稿:网友

本文实例为大家分享了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方法即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表