TP5后端代码如下:
//上传
public function uploadimg()
{
$config = [
'size' => 10000000,
'ext' => 'jpg,gif,png,bmp,jpeg,JPG'
];
$file = $this->request->file('files');
$upload_path = str_replace('\\', '/', ROOT_PATH . 'public/report');
$save_path = '/report/';
$info = $file->validate($config)->move($upload_path);
$image = \think\Image::open(ROOT_PATH . 'public/' . $save_path . $info->getSaveName());
// 按照原图的比例生成一个最大为700*700的缩略图替换原图
$image->thumb(700, 700, \think\Image::THUMB_CENTER)->save(ROOT_PATH . 'public/' . $save_path . $info->getSaveName());
return $info->getSaveName();
}
小程序端代码:(WXML)
<view class="picture">
<text class='index-4'>上传带看截图: </text>
<view class='proofimgs'>
<view class='pick' bindtap="chooseImg">
+
</view>
<view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap='previewImg'></image>
<image class='del' src='/pages/images/null.png' data-index="{{index}}" catchtap="deleteImg"></image>
</view>
</view>
</view>
(WXSS)
.index-4 {
margin-left: 85rpx;
color: #fff;
padding-top: 20rpx;
display: block;
}
.proofimgs {
margin-top: 20rpx;
margin-left: 90rpx;
width: 73%;
}
.pick {
width: 150rpx;
height: 150rpx;
color: #fff;
background: #000;
text-align: center;
opacity: 0.6;
border-radius: 30rpx;
font-size: 100rpx;
font-weight: bold;
}
.img {
display: flex;
align-items: top;
margin-top: 20rpx;
}
.imgSelected {
width: 100%;
}
.del {
width: 40rpx;
height: 40rpx;
margin-top: -20rpx;
margin-left: -20rpx;
}
(JS)
/**
* 页面的初始数据
*/
data: {
index: 0,
multiIndex: [0, 0],
//传到后台的课程分类
cname: '',
imgs: [],
proof: ''
},
//选择图片
chooseImg: function(e) {
var that = this;
console.log(that);
if (that.data.cname == '') {
} else {
var imgs = this.data.imgs;
if (imgs.length >= 9) {
this.setData({
lenMore: 1
});
setTimeout(function() {
that.setData({
lenMore: 0
});
}, 2500);
return false;
}
}
wx.chooseImage({
// count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
console.log(res,5255);
// console.log(tempFilePaths + '----');
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs.length >= 9) {
that.setData({
imgs: imgs
});
return false;
} else {
imgs.push(tempFilePaths[i]);
}
}
// console.log(imgs);
that.setData({
imgs: imgs,
});
//循环把图片上传到服务器
for (var i = 0; i < imgs.length; i++) {
wx.uploadFile({
url: 'https://www.move2china.com/wechat/report/uploadimg',
filePath: imgs[i],
name: 'files',
formData: {
cname: that.data.cname
},
success: function(res) {
var hhsd = res.data.replace(/\"/g, "");
that.data.proof = that.data.proof.concat(hhsd + ',');
that.setData({
proof: that.data.proof
});
}
})
}
}
});
},
// 删除图片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
},