微信小程序实现图片上传

如图：

直接上代码：

wxml:

<view class="weui-uploader">

<view class="weui-uploader__hd">

<view class="weui-uploader__title">图片上传</view>

</view>

<view class="weui-uploader__bd">

<block wx:for="{{imagesList}}" wx:key="*this" >

<view class="weui-uploader__file">

<image class="weui-uploader__img" src="{{item}}"></image>

</view>

</block>

<view class="weui-uploader__input-box">

<input class="weui-uploader__input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple="" bindtap='uploader' name="images"></input>

</view>

</view>

</view>

js:

// 图片上传

uploader:function(){

var that=this;

let imagesList=[];

let maxSize=1024*1024;

let maxLength=3;

let flag=true;

wx.chooseImage({

count: 6, //最多可以选择的图片总数

sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function(res) {

wx.showToast({

title: '正在上传...',

icon: 'loading',

mask: true,

duration: 500

})

for(let i=0;i<res.tempFiles.length;i++){

if(res.tempFiles[i].size>maxSize){

flag=false;

console.log(111)

wx.showModal({

content: '图片太大，不允许上传',

showCancel: false,

success: function (res) {

if (res.confirm) {

console.log('用户点击确定')

}

}

});

}

 

}

if (res.tempFiles.length>maxLength){

console.log('222');

wx.showModal({

content: '最多能上传'+maxLength+'张图片',

showCancel:false,

success:function(res){

if(res.confirm){

console.log('确定');

}

}

})

}

if (flag == true && res.tempFiles.length <= maxLength){

that.setData({

imagesList: res.tempFilePaths

})

}

wx.uploadFile({

url: 'https://shop.gxyourui.cn',

filePath: res.tempFilePaths[0],

name: 'images',

header: {

"Content-Type": "multipart/form-data",

'Content-Type': 'application/json'

},

success:function(data){

console.log(data);

},

fail:function(data){

console.log(data);

}

})

console.log(res);

},

fail:function(res){

console.log(res);

}

})

},

更多技术问题，请看：http://sucai.gxyourui.cn/Home/Article/blog_detail/article_id/59.html

阅读更多