小程序從相冊獲取圖片并上傳及使用相機拍照功能的方法

今天小編給大家分享一下小程序從相冊獲取圖片并上傳及使用相機拍照功能的方法的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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.js2 //獲取應用實例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, // 默認914 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有15 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有16 success: function (res) {17 // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片18 _this.setData({19 tempFilePaths:res.tempFilePaths20 })21 }22 })23 }24 })

這里說說sourcetype.默認是從相冊獲取和使用相機拍照,跟微信現在選擇圖片的界面一樣,第一格是拍照,后面的是相冊照片.

這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務器,需要用到另一個API.

示例代碼:

1 wx.chooseImage({2 success: function(res) {3 var tempFilePaths = res.tempFilePaths4 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.data13 //do something14 }15 })16 }17 })

以上就是“小程序從相冊獲取圖片并上傳及使用相機拍照功能的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。