销客多--基于私域saas电商运营系统的技术公共服务平台 | 咨询热线:4006-522-990
分销系统 > 分销学院 > 分销业界 > 微信小程序可以使用图片上传功能

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

作者:易分销/2017-12-25 14:44:13

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

微信小程序

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

前几天做了图片上传功能,被坑了一下。接下来我们来看一下微信的上传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中。

图片接收保存

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

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

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

本文由销客多发布,文章作者:逍客

大家都在看:

秒杀小程序 

拼团小程序 

降价拍小程序 

本文经授权 由易分销发布,转载联系作者并注明出处:https://www.shopefx.com/college/news/2333.html
《免责声明》如对文章、图片、字体等版权有疑问,请联系我们 。