這篇文章主要介紹了微信小程序如何實現圖片上傳,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
Android九宮格圖片展示的具體代碼
圖片上傳服務器:
wxml
<view class="container"> <button bindtap='chooseImageTap'>上傳圖片</button> </view>
wxss
Page({
/**
* 頁面的初始數據
*/
data: {
imgs: [],//本地圖片地址數組
picPaths:[],//網絡路徑
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
//添加上傳圖片
chooseImageTap: function () {
var that = this;
wx.showActionSheet({
itemList: ['從相冊中選擇', '拍照'],
itemColor: "#00000",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
// 圖片本地路徑
chooseWxImage: function (type) {
var that = this;
var imgsPaths = that.data.imgs;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
console.log(res.tempFilePaths[0]);
that.upImgs(res.tempFilePaths[0], 0) //調用上傳方法
}
})
},
//上傳服務器
upImgs: function (imgurl, index) {
var that = this;
wx.uploadFile({
url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx',//
filePath: imgurl,
name: 'file',
header: {
'content-type': 'multipart/form-data'
},
formData: null,
success: function (res) {
console.log(res) //接口返回網絡路徑
var data = JSON.parse(res.data)
that.data.picPaths.push(data['msg'])
that.setData({
picPaths: that.data.picPaths
})
console.log(that.data.picPaths)
}
})
},
})思路很簡單,多張上傳的話,在 upImgs 方法回調做判斷 index++ 繼續調用 upImgs方法即可
感謝你能夠認真閱讀完這篇文章,希望小編分享的“微信小程序如何實現圖片上傳”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。