小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器

前台代码wxml:

<button bindtap='chooseImg'>选择图片</button>//图片选择
<view><image src='{{img_l}}' bindtap='preview_img'></image></view>//图片预览<button bindtap='up_img'>上传</button>//上传

page({data:{img_l:''},chooseImg:function(){var _this = this;wx.chooseImage({count: 2, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;console.log(res)_this.setData({img_l:res.tempFilePaths})console.log(res)}})},up_img:function() {var _this = this;wx.uploadFile({url: 'http://127.0.0.1/m_pro/upload.php', //接口filePath: _this.data.img_l[0],name: 'file',formData: {'user': 'test'},success: function (res) {var data = res.data;console.log(data);//do something},fail: function (error) {console.log(error);}})},preview_img:function(){wx.previewImage({current: this.data.img_l, // 当前显示图片的http链接urls: this.data.img_l // 需要预览的图片http链接列表})}
})

后台php：

<?phpdate_default_timezone_set("Asia/Shanghai"); //设置时区
$code = $_FILES['file'];//获取小程序传来的图片
if(is_uploaded_file($_FILES['file']['tmp_name'])) {  //把文件转存到你希望的目录（不要使用copy函数）  $uploaded_file=$_FILES['file']['tmp_name'];  $username = "min_img";//我们给每个用户动态的创建一个文件夹  $user_path=$_SERVER['DOCUMENT_ROOT']."/m_pro/".$username;  //判断该用户文件夹是否已经有这个文件夹  if(!file_exists($user_path)) {  //mkdir($user_path); mkdir($user_path,0777,true); }  //$move_to_file=$user_path."/".$_FILES['file']['name'];  $file_true_name=$_FILES['file']['name'];  $move_to_file=$user_path."/".time().rand(1,1000)."-".date("Y-m-d").substr($file_true_name,strrpos($file_true_name,"."));//strrops($file_true,".")查找“.”在字符串中最后一次出现的位置  //echo "$uploaded_file   $move_to_file";  if(move_uploaded_file($uploaded_file,iconv("utf-8","gb2312",$move_to_file))) {  echo $_FILES['file']['name']."--上传成功".date("Y-m-d H:i:sa"); } else {  echo "上传失败".date("Y-m-d H:i:sa"); }
} else {  echo "上传失败".date("Y-m-d H:i:sa");
}  ?>

小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序多图片上传支持预览删除设置数量上限
github地址: https://github.com/Volcano-Yang/miniprogram-picture-upload Miniprogram-Picture-Upload 努力帮助 ...
【微信小程序】图片上传组件“mp-uploader“(weui)
使用示例 wxml <mp-uploader files="{{files}}" max-count="{{maximgs}}" max-size=& ...
小程序的图片上传和显示
在商城的发布页面,我们需要上传图片,存在云端,再显示在商品页面,可以参考这篇文章https://blog.csdn.net/Cheny_Yang/article/details/89033021 1. ...
微信小程序之图片上传、多图上传、头像上传、头像获取、图片上传失败问题解决
小程序用户授权获取用户头像,需点击才可以让用户选择是否授权. 图片上传失败问题解决图片上传一定要记得修改合法域名,不然会失败,而且找不到报错信息哟!并且域名采用 https 点击,用户授权,获取用 ...
微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
【小程序开发原创】小程序裁剪图片上传头像，二维码源码
微信小程序图片裁剪工具,简单易用项目需求在做微信小程序的时候有个图片上传之前裁剪的需求,找过一些github中的项目,都不太理想,主要是没有办法自定义宽高,于是自己研究了一下,做了一个简单的图片 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...

小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器

小程序的图片上传wx.uploadFile及后台PHP接收文件并存储到服务器相关推荐

最新文章

热门文章