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


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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
React 高阶组件入门介绍
Jan 11 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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获取二维数组中某一列的值集合
2015/12/25 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Angular排序实例详解
2017/06/28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
vuex实现购物车功能
2020/06/28 Javascript
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
PyMongo安装使用笔记
2015/04/27 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python自定义线程类简单示例
2018/03/23 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
事业单位鉴定材料
2014/05/25 职场文书
大学生工作自荐书
2014/06/16 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
小学优秀教师材料
2014/12/15 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
党员转正党支部意见
2015/06/02 职场文书
未婚证明范本
2015/06/15 职场文书
2016新年问候语大全
2015/11/11 职场文书
五年级作文之想象作文
2019/10/30 职场文书