您的位置:首页 > 移动开发 > 微信开发

微信小程序 上传图片(PHP后台)9张,上传到指定文件夹

2018-03-06 10:28 946 查看


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: 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;}
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);
}

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: