微信小程序 上传图片（PHP后台）9张，上传到指定文件夹
wxml
<
view
class=
"picture_list">
<
view
wx:for=
"{{upload_picture_list}}"
class=
"picture_item"
wx:key=
"{{index}}">
<
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=
"../../../image/officecollar.jpg"
bindtap=
"uploadpic"
mode=
"aspectFill">
image
>
view
>
view
>
<
button
bindtap=
'uploadimage'>确定上传
button
>
JS：
data: {
upload_picture_list: []
//装image的数组
},
//选择图片方法
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,
})
}
})
},
//点击上传事件
uploadimage:
function () {
var page =
this
var upload_picture_list = page.data.upload_picture_list
//循环把图片上传到服务器 并显示进度
for (
var j
in upload_picture_list) {
if (upload_picture_list[j][
'upload_percent'] ==
0) {
upload_file_server(page, upload_picture_list, j)
}
}
},
//上传方法
function upload_file_server(that, upload_picture_list, j) {
var time =
new Date()
var datetime = tt.formatTime(time)
//获取时间 防止命名重复
var date = datetime.substring(
0,
8)
//获取日期 分日期 文件夹存储
console.log(
"开始上传" + j +
"图片到服务器：")
//上传返回值
var upload_task = wx.uploadFile({
url:
'http//Index/Imageadmin
/imageupload'
,
//需要用HTTPS，同时在微信公众平台后台添加服务器地址
filePath: upload_picture_list[j][
'path'],
//上传的文件本地地址
name:
'file',
formData: {
'num': j,
'datetime': datetime,
'date': date
},
//附近数据，这里为路径
success:
function (res) {
console.log(res.data)
var data = JSON.parse(res.data)
//字符串转化为JSON
if (data.Success ==
true) {
console.log(
'OK')
//var filename = "http://127.0.0.1:8095/" + data.file//存储地址 显示
var filename = data.file
//存储地址 显示
upload_picture_list[j][
'path_server'] = filename
}
else {
var filename =
"http://127.0.0.1:8095/xx.png"
//错误图片 显示
upload_picture_list[j][
'path_server'] = filename
}
that.setData({
upload_picture_list: upload_picture_list
})
}
})
//上传 进度方法
upload_task.onProgressUpdate((res) => {
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 })
})
}
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:
160
rpx;
height:
160
rpx;
}
.upload_progress {
position:
absolute;
top:
0;
left:
0;
opacity:
0.7;
background-color:
#000;
color:
#fff;
width:
160
rpx;
height:
160
rpx;
text-align:
center;
line-height:
160
rpx;
font-size:
12px;
}
.picture_item
image {
width:
160
rpx;
height:
160
rpx;
}
php 后台：
class Imageadmin { public function imageupload() { //名字获取 $wxid=$_POST["num"]; //时间获取 $diaryTime=$_POST["datetime"]; //获取日期 $date = $_POST["date"]; $a = substr($_FILES['file']['type'],6);//获取图片后缀 //$a = strstr( $_FILES['file']['type'], '/'); $file_name=$date.'\\'.$diaryTime.'_'.$wxid.'.'.$a;//拼装存储地址path $file_name1=$date.'/'.$diaryTime.'_'.$wxid.'.'.$a;//拼装图片浏览path $path = "D:\wamp64\www\File\\".$file_name;//存储path $dir = iconv("UTF-8", "GBK","D:\wamp64\www\File\\".$date);//判断文件夹是否存在 if (!file_exists($dir)){ mkdir ($dir,0777,true);//不存在 创建新文件夹 $panduan = move_uploaded_file($_FILES['file']['tmp_name'], $path);//存入图片 } else { $panduan = move_uploaded_file($_FILES['file']['tmp_name'], $path);//存入已有文件夹内 } //保存到指定路径 指定名字 if ($panduan){//存储成功 $res = ['errCode'=>0,'errMsg'=>'图片上传成功','file'=>$file_name1,'Success'=>true]; return json($res); }else{//失败 $res = ['errCode'=>0,'errMsg'=>'图片上传失败','file'=>'http://127.0.0.1:8095/xx.png','Success'=>!true]; return json($res); } } public function upload() { //名字获取 $wxid=$_POST["wxid"]; //时间获取 $diaryTime=$_POST["diaryTime"]; //拼接存储名字 $diaryTime=substr($diaryTime,0,10).substr($diaryTime,11,2).substr($diaryTime,14,2).substr($diaryTime,17); //得到存储名字 $file_name=$wxid.'_'.$diaryTime.'.png'; //存储路径 $path='./picture/'.$file_name; //保存 move_uploaded_file($_FILES['picture']['tmp_name'], $path); } }