微信小程序 圖片上傳實例詳解
更新時間：2017年05月05日 11:30:17 投稿：lqh
這篇文章主要介紹了微信小程序 圖片上傳實例詳解的相關資料,需要的朋友可以參考下
一.了解wx.chooseImage(OBJECT)
二.代碼編程
在pages文件里面創(chuàng)建uploadimg文件夾
1.編寫頁面結構:uploadimg.wxml
<view class="container" style="padding:1rem;">
<button type="primary"bindtap="chooseimage">獲取圖片</button>
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx;margin:1rem 0;"/>
</view>
2.設置數(shù)據(jù):uploadimg.js
//獲取應用實例
var app = getApp()
Page({
data: {
tempFilePaths: '',
},
/**
* 上傳圖片
*/
chooseimage: function () {
var _this = this;
wx.chooseImage({
count: 1, // 默認9
// 可以指定是原圖還是壓縮圖，默認二者都有
sizeType: ['original', 'compressed'],
// 可以指定來源是相冊還是相機，默認二者都有
sourceType: ['album', 'camera'],
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
success: function (res) {
_this.setData({
tempFilePaths:res.tempFilePaths
})
}
})
}
}) 
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
codemirror6實現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實現(xiàn)在線代碼編輯器使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
Javascript常用數(shù)組是構成其的一個重要的部分，它們可以用來存儲字符串、對象、函數(shù)、因此本篇文章小編九帶大家深入了解Javascript常用數(shù)組的操作方法,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
JavaScript自動化測試添加頁面DOM元素唯一ID方案示例
這篇文章主要為大家介紹了JavaScript自動化測試添加頁面DOM元素唯一ID方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了微信小程序 request接口的封裝實例代碼的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序獲取用戶openId的實現(xiàn)方法的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 配置文件及配置文件的主要功能和注意事項的相關資料,需要的朋友可以參考下2016-12-12
這篇文章主要為大家介紹了ECharts圖表使用及異步加載的特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序 本地數(shù)據(jù)存儲實例詳解的相關資料,需要的朋友可以參考下2017-04-04
前端必會的package.json創(chuàng)建及常見屬性用法示例詳解
這篇文章主要為大家介紹了前端必會的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了在JavaScript實例對象中改寫原型方法的一下相關資料,需要的效果版可以參考一下文章詳細內(nèi)容，希望對你有所幫助2021-10-10