微信小程序开发(二)图片上传+服务端接收详解


Posted in Javascript onJanuary 11, 2017

这次介绍下小程序当中常用的图片上传。

前几天做了图片上传功能,被坑了一下。接下来我们来看一下微信的上传api。

微信小程序开发(二)图片上传+服务端接收详解

这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的PHP,只能自己去改接收图片的接口。

看一下页面效果图

微信小程序开发(二)图片上传+服务端接收详解

一个很常见的修改头像效果,选择图片(拍照),然后上传。

下面就是贴代码了

首先是小程序的wxml代码

<view class="xd-container">
<form bindsubmit="bindSaveTap">
<image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"></image>
<view class="xd-view-section">
 <text class="xd-abs xd-flex-left xd-text-nick">昵称</text>
 <input name="nick_name" placeholder="请输入昵称" class="xd-input" value="{{userInfo.user_name}}"/>
</view>
<view class="xd-view-section1">
 <text class="xd-abs xd-flex-left xd-text-nick">宝宝性别</text>
 <radio-group class="xd-abs xd-radio-group" name="baby_sex">
 <label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item">
 <radio color="#3cc975" value="{{item.name}}" wx:if="{{item.name==userInfo.baby_sex}}" checked="true"/>
 <radio color="#3cc975" value="{{item.name}}" wx:else checked="false"/>
 <text class="xd-radio-text">{{item.value}}</text>
 </label>
 </radio-group>
</view>
<view class="xd-view-section1">
 <text class="xd-abs xd-flex-left xd-text-nick">宝宝年龄</text>
 <input placeholder="请输入年龄" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/>
 <input name="baby_age" placeholder="请输入年龄" wx:else value="" class="xd-input"/>
</view>
<button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover">保存</button>
</form>
</view>

css代码我就不贴了,一些样式而已。

对应的JS代码

var util = require('../../../utils/util.js')
var app = getApp()
Page({
 data: {
sex_items: [
 {name:'1', value:'小王子'},
 {name:'2', value:'小公主'},
 {name:'0', value:'尚无'}
],
logo:null,

userInfo: {}
 },

 //事件处理函数
 bindViewTap: function() {
wx.navigateTo({
 // url: '../logs/logs'
// url: '../load/load'
})
 },
 onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
 //更新数据
 console.log(userInfo);
 that.setData({
 userInfo:userInfo,
 logo:userInfo.logo
 })
})
 },

 bindSaveTap: function(e){
console.log(e)
var formData = {
 uid:util.getUserID(),
 user_name:e.detail.value.nick_name,
 baby_sex:e.detail.value.baby_sex,
 baby_age:e.detail.value.baby_age
}
 console.log(formData)
app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData, 
function(res){
 console.log(res);
},
function(){
})
 }, 

 chooseImageTap: function(){
let _this = this;
wx.showActionSheet({
 itemList: ['从相册中选择', '拍照'],
 itemColor: "#f7982a",
 success: function(res) {
 if (!res.cancel) {
 if(res.tapIndex == 0){
 _this.chooseWxImage('album')
 }else if(res.tapIndex == 1){
 _this.chooseWxImage('camera')
 }
 }
 }
})

 },
chooseWxImage:function(type){
let _this = this;
wx.chooseImage({
 sizeType: ['original', 'compressed'],
 sourceType: [type],
 success: function (res) {
 console.log(res);
 _this.setData({
 logo: res.tempFilePaths[0],
 })
 }
 })
 }
})

主要讲解一下JS代码

1、chooseImageTap方法

用来显示一个选择图片和拍照的弹窗,用到了微信的一个页面交互的api showActionSheet,点击查看详细使用

显示操作菜单

2、chooseWxImage方法

主要是用来选择图片以及接收图片路径回调的监听,点击查看详细使用

从本地相册选择图片或使用相机拍照

3、上传

在chooseWxImage方法的success回调中我们可以看到,我把返回的图片路径res.tempFilePaths[0] 赋值给了logo,下面我们只需要调用upload方法就ok了,微信的uploadFile方法被我封装了一下变成了upload_file。

uploadFile方法

//上传文件
function upload_file(url, filePath, name, formData, success, fail) {
console.log('a='+filePath)
wx.uploadFile({
 url: rootUrl + url,
 filePath:filePath,
 name:name,
 header: {
 'content-type':'multipart/form-data'
 }, // 设置请求的 header
 formData: formData, // HTTP 请求中其他额外的 form data
 success: function(res){
 console.log(res);
 if(res.statusCode ==200 && !res.data.result_code){
 typeof success == "function" && success(res.data);
 }else{
 typeof fail == "function" && fail(res);
 }
 },
 fail: function(res) {
 console.log(res);
 typeof fail == "function" && fail(res);
  }
 })
}

filePath就是upload_file中我们传进来的logo变量,也就是图片的绝对路径。

服务器的接收图片代码

看过我上篇文章登录流程的文章的都熟悉了我服务器用的是php框架是Laravel。

这里我只贴一下接收image的代码;

if(!empty($_FILES['photos'])){
   $up_arr['logo'] = upload_logo('photos','manage/images/user','logo',$user_id,0);
   $up_arr['logo'] = $up_arr['logo'][0];
   $user_info['logo'] = $Server_Http_Path . $up_arr['logo'];
 }

核心方法在upload_log中。

图片接收保存

if( !function_exists('upload_logo')){
 function upload_logo( $key_name='photos', $logo_path='manage/images/nurse', $pre_name='logo', $salt='20160101',$encode = 1,$make=0 ){
  $result_arr = array();
  global $Server_Http_Path,$App_Error_Conf;
  //分文件夹保存 
  $date_info = getdate();
  $year = $date_info['year'];
  $mon = $date_info['mon'];
  $day = $date_info['mday'];
  $logo_path = sprintf("%s/%s/%s/%s",$logo_path,$year,$mon,$day);
  if(!is_dir($logo_path)){
   $res=mkdir($logo_path,0777,true);
  }
  //图片上传
  //foreach($photos as $key => $photo ){
  $photo = $_FILES['photos'];
  $name = $key_name;

  $file_id = Input::file($name);
  if(!empty($file_id) && $file_id -> isValid()){
   $entension = $file_id -> getClientOriginalExtension();
   if($pre_name == 'baby'){
    $new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);
   }else {
    $new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);
   }
   $path_id = $file_id -> move($logo_path,$new_name."_b.".$entension);
   if(!empty($path_id)){
    $path_name = $path_id->getPathName();
    $image_size=getimagesize($path_name);
 $weight=$image_size["0"];////获取图片的宽 

$height=$image_size["1"];///获取图片的高
if($pre_name == "baby" || $pre_name == "video") {   

   $photo_info['url'] = $path_name;  

   $photo_info['width'] = $weight;
  $photo_info['height'] = $height;
 $result_arr[] = $photo_info;
 }else{
 $result_arr[] = $path_name;
 } 
    //处理图片
if($make == 1){
 $img = Image::make($path_name)->resize(200, $height*200/$weight);
$img->save($logo_path ."/".$new_name."_s.".$entension);
 //dd($img);
 // return $img->response('jpg');
    }
   }
if(empty($result_arr)){
 $response['result_code'] = -1006;
 $response['result_msg'] = $App_Error_Conf[-1006];
  return response($response);
   }
 if($encode == 1){
    $result_arr = json_encode($result_arr);
   }
  }
  return $result_arr;
 }
 }

这个代码格式真的很烦人啊,我就大概整理了一下。

这样我们就入门了小程序图片上传和接口功能了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
js 创建书签小工具之理论
Feb 25 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
使用AOP改善javascript代码
May 01 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 #Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 #Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 #Javascript
vue2滚动条加载更多数据实现代码
Jan 10 #Javascript
简单实现IONIC购物车功能
Jan 10 #Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 #Javascript
原生js实现水平方向无缝滚动
Jan 10 #Javascript
You might like
php include的妙用,实现路径加密
2008/07/29 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
python selenium xpath定位操作
2020/09/01 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
pymysql模块使用简介与示例
2020/11/17 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
中医学专业自荐信范文
2014/04/01 职场文书
《雪儿》教学反思
2014/04/17 职场文书
民生工作实施方案
2014/05/31 职场文书
团队口号大全
2014/06/06 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
56句经典英文座右铭
2019/08/09 职场文书
golang内置函数len的小技巧
2021/07/25 Golang