微信小程序可以使用图片上传功能

据销客多小编观察最新发现：微信小程序上线快一年了，如今越来越火，入驻的品牌商家也越来越多，有一天你会发现，早上起来翻开微信，进入小程序，很多事情都能够完成了，购物，找货源，查资讯，预定等等都能够经过微信停止了。

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

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

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

看一下页面效果图

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

下面就是贴代码了

首先是小程序的wxml代码

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

对应的JS代码

主要讲解一下JS代码

1、chooseImageTap方法

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

显示操作菜单

2、chooseWxImage方法

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

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

3、上传

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

uploadFile方法

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

服务器的接收图片代码

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

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

核心方法在upload_log中。

图片接收保存

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

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

最后：微信小程序大家都在玩，连最大的竞争对手阿里巴巴都不放过小程序的红利期，小程序到底是不是互联网的下一站，你心里还没点数吗?

本文由销客多发布，文章作者：逍客

大家都在看：

秒杀小程序 

拼团小程序 

降价拍小程序