⼩程序上传图⽚到服务器并⽣成缩略图
因为近期公司计划做个摄影⽐赛，需要收集员⼯的照⽚作品，因为肯定是需要原图的，那样通过显然是不⽅便的，于是想到在⼩程序中添加图⽚上传功能，以前Sham⽤过每次添加1张图⽚，然后上传到服务器及数据库，趁这次机会，再次学习研究优化了代码，⽬前能够做到：
1. ⽤户能⼀次性添加多张图⽚（原图），然后会展⽰出来（⽬前⽆法预览添加的图⽚，待继续优化），同时会弹窗提醒是否上传，确认
则上传，取消则清空；
2. 上传图⽚到服务器时，⾃动⽣成缩略图，并且同时存储原图和缩略图到各⾃⽂件夹，然后返回缩略图值，⽤于展⽰及传到数据库中；
3. 提交表单后，⽤户查看记录时，初始加载缩略图，点击缩略图，会放⼤预览原图，提⾼⽤户加载速度和减少流量浪费；
下⾯，就来上代码：
⾸先是⼩程序端，JS中添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38/***上传图⽚*/
uploadimg: function () {
var that = this;
wx.chooseImage({ //从本地相册选择图⽚或使⽤相机拍照
count: 2, // 默认9
sizeType: ['original','compressed'], // 可以指定是原图还是压缩图，默认⼆者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认⼆者都有
success: function (res) {
// 返回选定照⽚的本地⽂件路径列表，tempFilePath可以作为img标签的src属性显⽰图⽚，批量添加的话，就是⼀个图⽚地址数组
var tempFilePaths = pFilePaths
wx.setStorageSync('tempFilePaths', pFilePaths)
that.setData({
sourcess: pFilePaths //这个⽤于展⽰添加的图⽚，并⾮服务器图⽚地址
})
//添加图⽚后，会弹窗提⽰，确认是否上传
wx.showModal({
title: '提⽰',
content: '确认上传这些吗',
success: function (res) {
if (firm) {
console.log('⽤户点击确定')
var tempFilePaths = wx.getStorageSync('tempFilePaths')
var sources = [];
//循环将添加的图⽚上传到服务器
for (var i = 0; i < tempFilePaths.length; i++) {
wx.showToast({
title: '正在上传中',
icon: 'loading',
duration: 15000
})
wx.uploadFile({
url: '你的服务器地址/imgupload.php?imgpath=userimg',
filePath: tempFilePaths[i],
name: 'file',
success: function (res) {
wx.hideToast();
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 wx.hideToast();
console.log(res.data)
if (res.data !== "上传错误") { sources.push(res.data)
//前台显⽰
that.setData({
sources: sources
})
console.log(sources)
}
丹东旅游景点简介}
})
}
} else if (res.cancel) {
console.log('⽤户点击取消')
that.setData({
sourcess: "",
})
}
}
})
}
})
昆明景点排行榜},
然后是⼩程序端的WXML
1 2 3 4 5 6 7<view class="imgupload">
<view bindtap="uploadimg" class="imgselect" ></view>
<view class="imgselected" wx:for="{{sourcess}}" wx:key="{{index}}" wx:for-item="sourcess"> <image src="{{sourcess}}" ></image>
</view>
<input type="text" value="{{sources}}" name="userimg" ></input>
</view>
顺带附上Sham⽤的WXSS 1
2 3 4 5
6 7 8 9 10 11 12 13 14 15.imgselect{
width: 200rpx;
height: 200rpx;
border:1px solid #DCDCDC;
text-align: center;
margin:20rpx 6rpx;
align-items: center;
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%; }
.imgselect image, .imgselected image{ margin:auto;
width: 195rpx;
15 16 17 18 19 20 21 22 23 24 25 26 width: 195rpx;
height: 195rpx;
捧的拼音}
.imgselected{
width: 200rpx;
height: 202rpx;
text-align: center;
margin:20rpx 6rpx;
padding:0px;
align-items: center;
justify-content: center; }
这样⼩程序端就完成了，然后就是服务器接收啦，imgupload.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38<?php
$imgurl="你存放图⽚的⽹址/";
// 允许上传的图⽚后缀
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
// echo $_FILES["file"]["size"];
$extension = end($temp); // 获取⽂件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
app store无法连接|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20480000) // ⼩于 20M，这个⾃⼰限制
&& in_array($extension, $allowedExts))
{
$imgpath=$_GET['imgpath']; //获取传来的图⽚分类，⽤于在服务器上分类存放
$code = $_FILES['file'];//获取⼩程序传来的图⽚
$uploaded_file=$_FILES['file']['tmp_name'];
$user_path=$_SERVER['DOCUMENT_ROOT'].$imgpath; //放到服务器下指定的⽂件夹
if(file_exists($user_path)){
}else{
mkdir($user_path,0777);
}
$size=$_FILES["file"]["size"];立夏的诗
$date=date('Ymd'); //得到当前时间
$newfilename=$date.'-'.$size.'.'.$extension; //得到⼀个新的⽂件名，可根据⾃⼰需求设定，sham⽤的时间加上图⽚⽂件⼤⼩来命名
$move_to_file=$user_path."/".$newfilename;
$file_true_name=$imgurl.$imgpath."/".$newfilename;
//echo $file_true_name;
$filename = json_encode($file_true_name);//把数据转换为JSON数据.
// echo $move_to_file;
move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file));
//下⾯的代码是⽤来⽣成缩略图的
$thump = $user_path."/thumb/"; //这个缩略图⽂件夹地址⾃⼰设置，这个是在原图⽂件夹⾥⾯增加1个⼦⽬录thumb⽤于存放缩略图
if(file_exists($thump)){
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 if(file_exists($thump)){
}else{
mkdir($thump,0777);
}
$imgs = $newfilename;
$imgss=$user_path."/".$imgs;
$img_arr = getimagesize($imgss);
$pecent = $img_arr[0]/$img_arr[1];
$width = 200; //这⾥是缩略图的尺⼨，⾃⾏设置
$height = 200/$pecent;
//下⾯是根据不同图⽚后缀，执⾏不同的图⽚⽣成代码
if($_FILES["file"]["type"] == "image/png"){
$img_in = imagecreatefrompng($imgss);
}elseif($_FILES["file"]["type"] == "image/jpg" || $_FILES["file"]["type"] == "image/jpeg" || $_FILES["file"]["type"] == "image/pjpeg"){
$img_in = imagecreatefromjpeg($imgss);
}elseif($_FILES["file"]["type"] == "image/gif"){
$img_in = imagecreatefromgif($imgss);
}
$img_out = imagecreatetruecolor($width, $height);
imagecopyresampled($img_out, $img_in, 0, 0, 0, 0, $width, $height, $img_arr[0], $img_arr[1]);
imagejpeg($img_out,$thump.$imgs,100);
imagedestroy($img_out);
imagedestroy($img_in);
//这⾥最后输出缩略图的⽹址，让⼩程序读取到，⽤于放⼊input⽤来传到数据库中
echo $imgurl.$imgpath."/thumb/".$newfilename;
学警狙击演员表}else
{
echo "上传错误";
}
>
这样，⼩程序上传图⽚，并⽣成原图、缩略图分类存放就完成了，如果是多图上传的，返回的是图⽚地址数组，上传数据库并后期调⽤的话，可根据⾃⼰需求，在提交时就通过for循环来依次提交，或者上传数据库后下次读取的时候再循环列出来，这个就⾃⾏处理吧
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论