小程序從相冊獲取圖片并上傳以及使用相機拍照功能
2018-06-19|HiShop
導(dǎo)讀:開發(fā)一個關(guān)于圖片的小程序,會使用到小程序獲取圖片,圖片上傳以及獲取相機權(quán)限的功能,那么要如何開發(fā)呢?...
開發(fā)一個關(guān)于圖片的小程序,會使用到小程序獲取圖片,圖片上傳以及獲取相機權(quán)限的功能,那么要如何開發(fā)呢?
1.index.wxml
- 1 <!--index.wxml-->
- 2 <button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button>
- 3 <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>
2.index.js
- 1 //index.js
- 2 //獲取應(yīng)用實例
- 3 var app = getApp()
- 4 Page({
- 5 data: {
- 6 tempFilePaths: ''
- 7 },
- 8 onLoad: function () {
- 9 },
- 10 chooseimage: function () {
- 11 var _this = this;
- 12 wx.chooseImage({
- 13 count: 1, // 默認9
- 14 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
- 15 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
- 16 success: function (res) {
- 17 // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片
- 18 _this.setData({
- 19 tempFilePaths:res.tempFilePaths
- 20 })
- 21 }
- 22 })
- 23 }
- 24 })
這里說說sourcetype.默認是從相冊獲取和使用相機拍照,跟微信現(xiàn)在選擇圖片的界面一樣,第一格是拍照,后面的是相冊照片.
這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務(wù)器,需要用到另一個API.
示例代碼:
- 1 wx.chooseImage({
- 2 success: function(res) {
- 3 var tempFilePaths = res.tempFilePaths
- 4 wx.uploadFile({
- 5 url: 'http://example.weixin.qq.com/upload', //僅為示例,非真實的接口地址
- 6 filePath: tempFilePaths[0],
- 7 name: 'file',
- 8 formData:{
- 9 'user': 'test'
- 10 },
- 11 success: function(res){
- 12 var data = res.data
- 13 //do something
- 14 }
- 15 })
- 16 }
- 17 })
上一篇:小程序中如何接入人臉融合功能 下一篇:微信小程序open-data更改頭像顯示樣式