微信小程序选择多张图片上传到服务器显示上传进度(PHP)代码全解
方维网络专注于网站建设和微信小程序定制开发,今天给大家分享一下微信小程序选择多张图片上传到服务器的实现及上传进度显示的代码全解与分享。
这里主要使用了两个微信的接口
一、wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照;
二、wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器,返回一个 uploadTask 对象,通过 uploadTask,可监听上传进度变化事件,以及取消上传任务。
WXML代码如下
<view class="picture_list">
<view wx:for="{{upload_picture_list}}" class="picture_item">
<image wx:if="{{item.upload_percent < 100}}" src="{{item.path}}" mode="aspectFill"></image>
<image wx:if="{{item.upload_percent == 100}}" src="{{item.path_server}}" mode="aspectFill"></image>
<view class="upload_progress" wx:if="{{item.upload_percent < 100}}">
{{item.upload_percent}}%
</view>
</view>
<view class="picture_item">
<image src="/images/btn_uploadpic.png" bindtap="uploadpic" mode="aspectFill"></image>
</view>
</view>
WXSS样式代码如下
.picture_...
查看详细