微信小程序 圖片上傳實例詳解
更新時間：2017年05月05日 11:30:17 投稿：lqh
這篇文章主要介紹了微信小程序 圖片上傳實例詳解的相關資料,需要的朋友可以參考下
一.了解wx.chooseImage(OBJECT)
二.代碼編程
在pages文件里面創(chuàng)建uploadimg文件夾
1.編寫頁面結(jié)構(gòu):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
})
}
})
}
}) 
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
本章主要是解決無界微前端環(huán)境下element-ui彈框偏移問題，如果你用的是其他微前端框架，且提供了jsloader這種預處理器，則可以舉一反三解決同樣的問題2023-08-08
彈幕效果隨著b站的越做越強，出現(xiàn)了越來越多的仿照b站的視頻站點。然而這些視頻站仿照的最多的只有一點！那就是彈幕，現(xiàn)在也越來越多的人喜歡上了彈幕本文就教你如何制作2021-08-08
使用HTTP?Referer實現(xiàn)圖片防盜圖文示例詳解
這篇文章主要為大家介紹了使用HTTP?Referer實現(xiàn)圖片防盜圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了Skypack布局前端基建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
如果文字過長,則將過長的部分變成省略號顯示...2006-06-06
這篇文章主要給大家介紹的是JS中輕松遍歷對象屬性的幾種方式，文章從自身可枚舉屬性、Object.values() 返回屬性值、Object.entries()來展開介紹，感興趣的小伙伴可以參考一下2021-09-09
這篇文章主要介紹了微信小程序 小程序制作及動畫詳解的相關資料,這里對小程序制作進行了詳解，介紹動畫部分的知識，需要的朋友可以參考下2017-01-01
這篇文章主要介紹了微信小程序 action-sheet詳解及實例代碼的相關資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了 微信小程序?qū)崿F(xiàn)圖片輪播及文件上傳的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 密碼輸入（源碼下載）的相關資料,需要的朋友可以參考下2017-06-06