请选择 进入手机版 | 继续访问电脑版

喝彩资源网

查看: 707|回复: 0

微信小程序开发教程:如何调用手机拍照相册功能上传图片

[复制链接]

56

主题

60

帖子

318

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
318
发表于 2017-6-23 21:56:52 | 显示全部楼层 |阅读模式
微信小程序开发教程:如何调用手机拍照相册功能上传图片。这次介绍下小程序当中常用的图片上传。
前几天做了图片上传功能,被坑了一下。接下来我们来看一下微信的上传api。
192635nppk1poi5z1myp2j.png

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

看一下页面效果图
192703ow5hh9twbqnndbzb.png

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

下面就是贴代码了

首先是小程序的wxml代码
  1. <view class="xd-container">
  2. <form bindsubmit="bindSaveTap">
  3. <image class="xd-img-user1" catchtap="chooseImageTap" src="{{logo}}"></image>
  4. <view class="xd-view-section">
  5. <text class="xd-abs xd-flex-left xd-text-nick">昵称</text>
  6. <input name="nick_name" placeholder="请输入昵称" class="xd-input" value="{{userInfo.user_name}}"/>
  7. </view>
  8. <view class="xd-view-section1">
  9. <text class="xd-abs xd-flex-left xd-text-nick">宝宝性别</text>
  10. <radio-group class="xd-abs xd-radio-group" name="baby_sex">
  11. <label class="xd-label-radio" wx:for="{{sex_items}}" wx:key="item">
  12. <radio color="#3cc975" value="{{item.name}}" wx:if="{{item.name==userInfo.baby_sex}}" checked="true"/>
  13. <radio color="#3cc975" value="{{item.name}}" wx:else checked="false"/>
  14. <text class="xd-radio-text">{{item.value}}</text>
  15. </label>
  16. </radio-group>
  17. </view>
  18. <view class="xd-view-section1">
  19. <text class="xd-abs xd-flex-left xd-text-nick">宝宝年龄</text>
  20. <input placeholder="请输入年龄" wx:if="{{userInfo.baby_age != 0}}" value="{{userInfo.baby_age}}" class="xd-input"/>
  21. <input name="baby_age" placeholder="请输入年龄" wx:else value="" class="xd-input"/>
  22. </view>
  23. <button size="default" class="xd-abs xd-subBtn" formType="submit" hover-class="xd-subBtn-hover">保存</button>
  24. </form>
  25. </view>
复制代码
css代码我就不贴了,一些样式而已。

对应的JS代码
  1. var util = require('../../../utils/util.js')
  2. var app = getApp()
  3. Page({
  4. data: {
  5. sex_items: [
  6. {name:'1', value:'小王子'},
  7. {name:'2', value:'小公主'},
  8. {name:'0', value:'尚无'}
  9. ],
  10. logo:null,
  11. userInfo: {}
  12. },

  13. //事件处理函数

  14. bindViewTap: function() {
  15. wx.navigateTo({
  16. // url: '../logs/logs'
  17. // url: '../load/load'
  18. })
  19. },

  20. onLoad: function () {
  21. console.log('onLoad')
  22. var that = this
  23. //调用应用实例的方法获取全局数据

  24. app.getUserInfo(function(userInfo){
  25. //更新数据
  26. console.log(userInfo);
  27. that.setData({
  28. userInfo:userInfo,
  29. logo:userInfo.logo
  30. })
  31. })
  32. },

  33. bindSaveTap: function(e){
  34. console.log(e)
  35. var formData = {
  36. uid:util.getUserID(),
  37. user_name:e.detail.value.nick_name,
  38. baby_sex:e.detail.value.baby_sex,
  39. baby_age:e.detail.value.baby_age
  40. }
  41. console.log(formData)
  42. app.apiFunc.upload_file(app.apiUrl.modify_user, this.data.logo, 'photos', formData,
  43. function(res){
  44. console.log(res);
  45. },
  46. function(){
  47. })
  48. },

  49. chooseImageTap: function(){
  50. let _this = this;
  51. wx.showActionSheet({
  52. itemList: ['从相册中选择', '拍照'],
  53. itemColor: "#f7982a",
  54. success: function(res) {
  55. if (!res.cancel) {

  56. if(res.tapIndex == 0){
  57. _this.chooseWxImage('album')

  58. }else if(res.tapIndex == 1){
  59. _this.chooseWxImage('camera')
  60. }
  61. }
  62. }
  63. })
  64. },
  65. chooseWxImage:function(type){
  66. let _this = this;
  67. wx.chooseImage({
  68. sizeType: ['original', 'compressed'],
  69. sourceType: [type],
  70. success: function (res) {
  71. console.log(res);

  72. _this.setData({
  73. logo: res.tempFilePaths[0],

  74. })
  75. }
  76. })
  77. }
  78. })
复制代码
主要讲解一下JS代码

1、chooseImageTap方法

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

显示操作菜单

2、chooseWxImage方法

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

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

3、上传

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

uploadFile方法
  1. //上传文件


  2. function upload_file(url, filePath, name, formData, success, fail) {

  3. console.log('a='+filePath)

  4. wx.uploadFile({

  5. url: rootUrl + url,

  6. filePath:filePath,

  7. name:name,

  8. header: {

  9. 'content-type':'multipart/form-data'

  10. }, // 设置请求的 header

  11. formData: formData, // HTTP 请求中其他额外的 form data

  12. success: function(res){

  13. console.log(res);

  14. if(res.statusCode ==200 && !res.data.result_code){

  15. typeof success == "function" && success(res.data);

  16. }else{

  17. typeof fail == "function" && fail(res);

  18. }
  19. },

  20. fail: function(res) {

  21. console.log(res);
  22. typeof fail == "function" && fail(res);

  23. }
  24. })
  25. }
复制代码
filePath就是upload_file中我们传进来的logo变量,也就是图片的绝对路径。

服务器的接收图片代码
我服务器用的是php框架是Laravel。
这里我只贴一下接收image的代码;
  1. if(!empty($_FILES['photos'])){
  2. $up_arr['logo'] = upload_logo('photos','manage/images/user','logo',$user_id,0);
  3. $up_arr['logo'] = $up_arr['logo'][0];
  4. $user_info['logo'] = $Server_Http_Path . $up_arr['logo'];
  5. }
复制代码
核心方法在upload_log中。

图片接收保存
  1. if( !function_exists('upload_logo')){


  2. function upload_logo( $key_name='photos', $logo_path='manage/images/nurse', $pre_name='logo', $salt='20160101',$encode = 1,$make=0 ){


  3. $result_arr = array();


  4. global $Server_Http_Path,$App_Error_Conf;


  5. //分文件夹保存


  6. $date_info = getdate();


  7. $year = $date_info['year'];


  8. $mon = $date_info['mon'];


  9. $day = $date_info['mday'];


  10. $logo_path = sprintf("%s/%s/%s/%s",$logo_path,$year,$mon,$day);


  11. if(!is_dir($logo_path)){


  12. $res=mkdir($logo_path,0777,true);


  13. }


  14. //图片上传


  15. //foreach($photos as $key => $photo ){


  16. $photo = $_FILES['photos'];


  17. $name = $key_name;





  18. $file_id = Input::file($name);


  19. if(!empty($file_id) && $file_id -> isValid()){


  20. $entension = $file_id -> getClientOriginalExtension();


  21. if($pre_name == 'baby'){


  22. $new_name = $pre_name . "_" . intval($salt) ."_" .time() . "_" . salt_rand(2,2);


  23. }else {


  24. $new_name = $pre_name . "_" . intval($salt) ."_" . salt_rand(2,2);


  25. }


  26. $path_id = $file_id -> move($logo_path,$new_name."_b.".$entension);


  27. if(!empty($path_id)){


  28. $path_name = $path_id->getPathName();


  29. $image_size=getimagesize($path_name);


  30. $weight=$image_size["0"];////获取图片的宽





  31. $height=$image_size["1"];///获取图片的高


  32. if($pre_name == "baby" || $pre_name == "video") {





  33. $photo_info['url'] = $path_name;





  34. $photo_info['width'] = $weight;


  35. $photo_info['height'] = $height;


  36. $result_arr[] = $photo_info;


  37. }else{


  38. $result_arr[] = $path_name;


  39. }


  40. //处理图片


  41. if($make == 1){

  42. $img = Image::make($path_name)->resize(200, $height*200/$weight);

  43. $img->save($logo_path ."/".$new_name."_s.".$entension);

  44. //dd($img);
  45. // return $img->response('jpg');

  46. }
  47. }
  48. if(empty($result_arr)){
  49. $response['result_code'] = -1006;
  50. $response['result_msg'] = $App_Error_Conf[-1006];

  51. return response($response);
  52. }
  53. if($encode == 1){
  54. $result_arr = json_encode($result_arr);
  55. }
  56. }
  57. return $result_arr;
  58. }
  59. }
复制代码
这样我们就入门了小程序图片上传和接口功能了。
今天就先介绍到这,有问题可以给我留言,或者加我微信:18639015509(微信同号)



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|喝彩资源网 ( 豫ICP备15004678号  

GMT+8, 2018-8-20 11:14 , Processed in 0.569820 second(s), 35 queries .

技术支持:喝彩资源网  豫ICP备15004678号

Powered by hecaikeji X3.2 © 2016-2018 hecai Inc.

快速回复 返回顶部 返回列表