微信小程序 上传图片（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);
    }


}