微信小程序实现图片上传

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

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

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