关于小程序上传图片到服务器

最近学习小程序编程，上传图片到服务器一直不成功，网上查了不少资料方知是少了服务器端的接收代码。现在把代码贴出来供大家参考：
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 "上传错误";}?>

关于小程序上传图片到服务器相关推荐

微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片到服务器不显示,微信小程序上传图片到服务器wx.uploadFile...
项目中肯路能需还定有开都视这讲房哦搞有名需移洁页定会遇到上传文件到服务器端,小程序提供了很有用的ap朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上i wxml代码遇新是直朋能到: 上传 ...
uniapp 微信小程序上传图片到服务器
图片选择,图片上传,点击查看,点击删除. uniapp自带的chooseImage和uploadFile就可以解决选择和上传.预览/查看用previewImage,删除就直接移除list里面的项就好了 ...
图片上传成功但是图片显示不出来_小程序上传图片到腾讯云
这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大准备工作上传图片主要是将图片上传到腾讯云对象存储(COS). 要使用对象存储 API,需要先执行以下步骤 ...
小程序上传图片到七牛云
小程序上传图片到七牛云一.创建七牛云账号,获取ak.sk,创建对象存储空间名称二.服务端接口获取七牛token值,个人使用的php编写的 ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...

关于小程序上传图片到服务器

关于小程序上传图片到服务器相关推荐

最新文章

热门文章