微信小程序之多圖上傳
小程序的upLoadFile一次只能上傳一張圖片,需要循環調這個接口來實現多圖上傳,以下是示例代碼,也可以直接封裝成組件調用
wxml
1 2 3 4 |
< view class="images" bindtap="upload"> < image src="../../images/icon_shangchuan.png"></ image > < text >添加圖片</ text > </ view > |
wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.images{ width: 134rpx; height: 134rpx; border:1px dashed #D8D8D8; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container .images image{ width: 60rpx; height: 60rpx; } |
wx.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
upload: function (e) { var that = this; // 上傳圖片的提示 if (that.data.uploaderNum >= 10) return wx.showToast({ title: "最多只能上傳" + '10' + "張圖", duration: 2500, icon: "none" }), !1; //選擇圖片 wx.chooseImage({ count: 10 - that.data.uploaderNum, // 默認10 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標簽的src屬性顯示圖片 that.data.uploaderList.concat(res.tempFilePaths); var uploaderList = res.tempFilePaths; that.setData({ uploaderList: that.data.uploaderList.concat(res.tempFilePaths), }) that.setData({ uploaderNum: that.data.uploaderList.length }) for (var i = 0; i < uploaderList.length; i++) { wx.uploadFile({ url: getApp().globalData.url+'/api/upload/upload', filePath: uploaderList[i], name: 'file', // 需要傳的參數 formData: { 'user': 'test' }, success: function (res) { that.setData({ tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path) }) } }) } } }) }, |
如果您的問題還未解決可以聯系站長付費協助。

有問題可以加入技術QQ群一起交流學習
本站vip會員 請加入無憂模板網 VIP群(50604020) PS:加入時備注用戶名或昵稱
普通注冊會員或訪客 請加入無憂模板網 技術交流群(50604130)
客服微信號:15898888535
聲明:本站所有文章資源內容,如無特殊說明或標注,均為采集網絡資源。如若內容侵犯了原著者的合法權益,可聯系站長刪除。