微信小程序可以使用圖片上傳功能

據銷客多小編觀察最新發現：微信小程序上線快一年了，如今越來越火，入駐的品牌商家也越來越多，有一天你會發現，早上起來翻開微信，進入小程序，很多事情都能夠完成了，購物，找貨源，查資訊，預定等等都能夠經過微信停止了。

這次介紹下小程序當中常用的圖片上傳。

前幾天做了圖片上傳功能，被坑了一下。接下來我們來看一下微信的上傳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中。

圖片接收保存

這個代碼格式真的很煩人啊，我就大概整理了一下。

這樣我們就入門了小程序圖片上傳和接口功能了。

最后：微信小程序大家都在玩，連最大的競爭對手阿里巴巴都不放過小程序的紅利期，小程序到底是不是互聯網的下一站，你心里還沒點數嗎?

本文由銷客多發布，文章作者：逍客

大家都在看：

秒殺小程序 

拼團小程序 

降價拍小程序