2018-12-24
详情示例见：https://www.cnblogs.com/cisum/p/9564898.html
2018-12-29
组件下载见：https://www.cnblogs.com/cisum/p/10199507.html
2019-3-14（推荐）
组件demo：https://www.cnblogs.com/cisum/p/10533559.html
index.js
data: {
list: '',
upload_picture_list: []
},
//选择图片方法
uploadpic: function (e) {
var that = this //获取上下文
var upload_picture_list = that.data.upload_picture_list
//选择图片
wx.chooseImage({
count: 8,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
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) {
//调用函数
app.util.upload_file_server(app.api.up_pic,page, upload_picture_list, j)
}
}
},
// 删除图片
deleteImg: function(e) {
let upload_picture_list = this.data.upload_picture_list;
let index = e.currentTarget.dataset.index;
upload_picture_list.splice(index, 1);
this.setData({
upload_picture_list: upload_picture_list
});
},
//上传方法
function upload_file_server(url, that, upload_picture_list, j) {
//上传返回值
const upload_task = wx.uploadFile({
// 模拟https
url: url, //需要用HTTPS，同时在微信公众平台后台添加服务器地址
filePath: upload_picture_list[j]['path'], //上传的文件本地地址
name: 'file',
formData: {
'num': j
},
//附近数据，这里为路径
success: function (res) { var data = JSON.parse(res.data);
// //字符串转化为JSON
if (data.Success == true) { var filename = data.file //存储地址 显示 upload_picture_list[j]['path_server'] = filename
} else {
upload_picture_list[j]['path_server'] = filename
}
that.setData({
upload_picture_list: upload_picture_list
}); wx.setStorageSync('imgs', upload_picture_list);
}
})
//上传 进度方法
upload_task.onProgressUpdate((res) => {
upload_picture_list[j]['upload_percent'] = res.progress
that.setData({
upload_picture_list: upload_picture_list
});
});
}
index.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}}" data-index="{{index}}" bindtap="previewImg">{{item.upload_percent}}%</view>
<text class='del' bindtap='deleteImg' data-src='{{image}}' style='display:{{isDel}}' data-index="{{index}}">×</text>
</view>
<view class='picture_item'>
<view class="add-image" bindtap='uploadpic'>
<text>+</text>
</view>
</view>
</view>
<button bindtap='uploadimage' class='yes-upload'>确定上传</button>
index.wxss
.add-image, .up-pic image {
margin-top: 2%;
margin-left: 2%;
width: 150rpx;
height: 150rpx;
color: #ddd;
font-size: 144rpx;
line-height: 95%;
text-align: center;
background-color: #fff;
cursor: pointer;
border-radius: 10rpx;
}
.picture_list {
padding: 20rpx;
margin-left: 12%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.picture_item {
margin: 10px;
margin-left:;
position: relative;
width: 160rpx;
height: 160rpx;
}
.picture_item .del {
position: absolute;
top: -11rpx;
right: -11rpx;
color: #fff;
border-radius: 50%;
width: 40rpx;
height: 40rpx;
z-index:;
line-height: 35rpx;
text-align: center;
background-color: #f00;
}
.upload_progress {
position: absolute;
top:;
left:;
opacity: 0.7;
border-radius: 8rpx;
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;
}
app.api.x ：是封装的各类请求url地址
app.util.x ：是封装的函数，关于使用
1. 先util添加方法
2. app.js
3. 页面上调用，需要声明
后端php代码
<?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:\www\File\\".$file_name;//存储path
$dir = iconv("UTF-8", "GBK","D:\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'=>'https://127.0.0.1:80/xxxx.png','Success'=>!true];
return json($res);
}
} }
?>