您好,登錄后才能下訂單哦!
小程序開發中如何實現一個圖片上傳功能?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
具體內容如下
Page({ /** * 頁面的初始數據 */ data: { pics: [], count: 9, //上傳圖片最大數量 // showImgUrl: "", //路徑拼接,一般上傳返回的都是文件名, uploadImgUrl: 'https://xxx/UploadHandler.ashx', //圖片的上傳的路徑 detailPics: [], //上傳的結果圖片集合 }, selectimages() { var that = this; var detailPics = that.data.detailPics; if (detailPics.length >= that.data.count) { wx.showToast({ title: '最多選擇' + that.data.count + '張!', }) return; } wx.chooseImage({ count: that.data.count, // 最多可以選擇的圖片張數,默認9 sizeType: ['original', 'compressed'], // original 原圖,compressed 壓縮圖,默認二者都有 sourceType: ['album', 'camera'], // album 從相冊選圖,camera 使用相機,默認二者都有 success: function(res) { var imgs = res.tempFilePaths; for (var i = 0; i < imgs.length; i++) { that.data.pics.push(imgs[i]) } that.setData({ pics: that.data.pics }) console.log(that.data.pics) that.uploadimg({ url: that.data.uploadImgUrl, //這里是你圖片上傳的接口 path: that.data.pics, //這里是選取的圖片的地址數組 }); }, }) }, //多張圖片上傳 uploadimg: function(data) { wx.showLoading({ title: '上傳圖片中...', mask: true, }) var that = this, i = data.i ? data.i : 0, success = data.success ? data.success : 0, fail = data.fail ? data.fail : 0; wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'fileData', formData: null, success: (resp) => { wx.hideLoading(); success++; var str = resp.data //返回的結果,可能不同項目結果不一樣 var pic = JSON.parse(str); var pic_name = pic.url; var detailPics = that.data.detailPics; detailPics.push(pic_name) that.setData({ detailPics: detailPics }) }, fail: (res) => { fail++; console.log('fail:' + i + "fail:" + fail); }, complete: () => { i++; if (i == data.path.length) { //當圖片傳完時,停止調用 that.send() console.log('執行完畢'); console.log('成功:' + success + " 失敗:" + fail); var myEventDetail = { picsList: that.data.detailPics } // detail對象,提供給事件監聽函數 var myEventOption = {} // 觸發事件的選項 that.triggerEvent('myevent', myEventDetail, myEventOption) //結果返回調用的頁面 } else { //若圖片還沒有傳完,則繼續調用函數 data.i = i; data.success = success; data.fail = fail; that.uploadimg(data); //遞歸,回調自己 } } }); }, })
效果圖:
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注億速云行業資訊頻道,感謝您對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。