最近学习小程序编程,上传图片到服务器一直不成功,网上查了不少资料方知是少了服务器端的接收代码。现在把代码贴出来供大家参考:
upanddown.wxml文件:
<!--pages/upanddown/upanddown.wxml-->
<view class="FileUploadContainer">
<view class="title">Upload File</view>
<button bindtap="click">点击访问</button>
<!--文件上传-->
<view class="demo-box">
<image wx:if="{{src}}" src="{{src}}" mode="aspectFit"></image>
<button bindtap="chooseImage">To choose File</button>
<button type="primary" bindtap="UploadFile">Upload</button>
</view>
<!--文件下载-->
<view>
<button type="primary" bindtap="DownloadFile">Download</button>
<image mode="aspectFit" wx:if="{{img}}" src="{{img}}" bindtap="previewImage"></image>
<button type="primary" bindtap="reset">Reset</button>
</view>
</view>
upanddown.js文件:
// pages/upanddown/upanddown.js
Page({
/**
* 页面的初始数据
*/
data: {
src:'',//上传图片路径
img:''
},
/**
* 查看是否能连接到服务器
*/
click:function(){
wx.request({
url: 'http://localhostt/',
data:{
message:"message from wechat"
},
method:'GET',
success:(res)=>{
if(res.statusCode==200){
console.log(res.data)
}
if(res.statusCode==404){
wx.showToast({
title: '找不到请求对象',
icon:'none'
})
console.log("找不到请求对象")
}
},
fail:(res)=>{
wx.showToast({
title: '找不到请求对象',
icon:'none'
})
console.log("请求失败")
}
})
},
chooseImage:function(){
var that=this;
wx.chooseImage({
count: 1,
sizeType: ['original','compressed'],//指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'],//指定是相册还是相机,默认二者都有
success:(res)=>{
let src=res.tempFilePaths[0];
console.log(src);
that.setData({
src:src
})
}
})
},
UploadFile:function(){
var that=this;
let src=this.data.src;
console.log(src);
if(src==''){
wx.showToast({
title: 'Plase choose file',
icon:'none'
})
}
else{
var uploadTask=wx.uploadFile({
filePath: src,
name: 'file',
url: 'http://localhost/imgupload.php',
formData:{
'filename':'fmw081418108.jpg'
},
success:function(res){
console.log('[上传文件] 成功:', res)
wx.showToast({
title: res.data,
})
},
fail: function (res) {
console.log('上传失败');
}
})
uploadTask.onProgressUpdate((res)=>{
console.log('上传进度',res.progress)
console.log('已经上传的数据长度',res.totalBytesSent)
console.log('与其需要上传的数据总长度',res.totalBytesExpectedToSend)
})
}
},
previewImage:function(){
wx.previewImage({
current:this.data.img,
urls:this.data.img
})
},
DownloadFile:function(){
var that=this;
var filename="3.png";
var downloadTask = wx.downloadFile({
url: 'http://localhost/3.png',
success:(res)=>{
if(res.statusCode==200){
console.log("下载成功");
wx.playVoice({
filePath: res.tempFilePath
});
let img=res.tempFilePath;
console.log(res);
that.setData({
img:img
})
}
else{
console.log("下载失败",res.statusCode);
}
}
})
downloadTask.onProgressUpdate((res) => {
console.log('下载进度', res.progress)
console.log('已经下载的数据长度', res.totalBytesWritten)
console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
})
},
})
服务器端的imgupload.php文件
<?php
$imgurl="https://localhost/";
// 允许上传的图片后缀
$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")
|| ($_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='3.'.$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)){
}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 "上传错误";
}
?>