方维网络专注于网站建设和微信小程序定制开发，今天给大家分享一下微信小程序选择多张图片上传到服务器的实现及上传进度显示的代码全解与分享。
这里主要使用了两个微信的接口
一、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_list{
padding:20px;
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content:flex-start;
align-items:flex-start;
align-content:flex-start;
}
.picture_item{margin:10px;position:relative;width:160rpx;height:160rpx;}
.upload_progress{position:absolute;top:0;left:0;opacity:0.7;background-color:#000;color:#fff;width:160rpx;height:160rpx;text-align:center;line-height:160rpx;font-size:12px;}
.picture_item image{width:160rpx;height:160rpx;}
下面是关键的JS代码
/**
* 页面的初始数据
*/
data: {
upload_picture_list:[]
},
uploadpic: function (e) {
var that = this
var upload_picture_list = that.data.upload_picture_list
wx.chooseImage({
count: 8, // 默认9，这里显示一次选择相册的图片数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFiles = res.tempFiles
//循环把图片加入上传列表
for (var i in tempFiles) {
tempFiles[i]['upload_percent'] = 0
tempFiles[i]['path_server'] = ''
upload_picture_list.push(tempFiles[i])
}
that.setData({
upload_picture_list: upload_picture_list,
})
//循环把图片上传到服务器 并显示进度
for (var j in upload_picture_list) {
if (upload_picture_list[j]['upload_percent'] == 0) {
upload_file_server(that,upload_picture_list,j)
}
}
}
})
},
function upload_file_server(that,upload_picture_list,j) {
console.log("开始上传"+j+"图片到服务器：")
console.log(upload_picture_list[j])
var upload_task = wx.uploadFile({
url: 'http://www.szfangwei.cn/', //需要用HTTPS，同时在微信公众平台后台添加服务器地址
filePath: upload_picture_list[j]['path'],//上传的文件本地地址
name: 'file',
formData: {'path': 'wxchat'},//附近数据，这里为路径
success: function (res) {
var data = JSON.parse(res.data) //字符串转化为JSON
if (data.Success == true) {
var filename = "http://www.szfangwei.cn/" + data.SaveName
upload_picture_list[j]['path_server'] = filename
}
that.setData({
upload_picture_list: upload_picture_list
})
console.log("图片上传" + j +"到服务器完成：")
console.log(upload_picture_list[j])
}
})
upload_task.onProgressUpdate((res) => {
// console.log('上传进度', res.progress)
// console.log('已经上传的数据长度', res.totalBytesSent)
// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
upload_picture_list[j]['upload_percent'] = res.progress
console.log('第' + j + '个图片上传进度：' + upload_picture_list[j]['upload_percent'])
console.log(upload_picture_list)
that.setData({
upload_picture_list: upload_picture_list
})
})
}
PHP代码（服务器接受文件，以THINKPHP为例）
//$path为上传路径
public function upload($path){
if(IS_POST){
$upload = new \Think\Upload(); // 实例化上传类
$upload->exts = array('jpg', 'bmp', 'gif', 'png', 'jpeg'); // 设置附件上传类型
$upload->saveName = array('randomname', '6');
$upload->maxSize = 2024000;//图片上传
$upload->rootPath = 'Public'; // 设置附件上传目录
$upload->savePath = '/upload/' . $path . '/';
$upload->autoSub = false;
$info = $upload->upload();
if (!$info) {// 上传错误提示错误信息
$data['Message'] = $upload->getError();
$data['Success'] = false;
} else {// 上传成功
foreach ($info as $file) {
$filepath = "/" . $upload->rootPath . $file['savepath'] . $file['savename'];
$data['Success'] = true;
$data['SaveName'] = $filepath;
}
}
$this->ajaxReturn($data);
}
这里备注下，就是最大并发送是10个文件一起上传，同时默认超时时间和最大超时时间都是 60s，上传图片进度显示需要基础库 1.4.0 开始才支持，如果版本太低需要做兼容处理或者不显示进度。
到此就算大功高成，微信小程序多图上传功能基本就算完成，此代码示例方维网络已经测试通过，如有问题欢迎反馈我们的客服QQ
此文章为方维网络原创，转载请注明出处。
