微信小程序?qū)崿F(xiàn)同時上傳多張圖片
更新時間:2020年02月03日 14:23:06 作者:文龍z
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)同時上傳多張圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)同時上傳多張圖片的具體代碼,供大家參考,具體內(nèi)容如下
1.圖片選擇后,路徑已經(jīng)存入list中:
data: { images: [], //選擇的圖片 },
2.調(diào)用遞歸上傳的方法:
wx.chooseImage({ var that = this count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res){ var successUp = 0; //成功,初始化為0 var failUp = 0; //失敗,初始化為0 var length = that.data.images.length; //總共上傳的數(shù)量 var count = 0; //第幾張,初始化為0 var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上傳的接口 //調(diào)用上傳圖片的公共函數(shù) that.uploadOneByOne(url, that.data.images, successUp, failUp, count, length); }, });
3.遞歸上傳方法:
/** * 上傳圖片:遞歸的方式上傳 * url:上傳地址 * imgPaths:上傳的圖片列表 * successUp:上傳成功的個數(shù),初始化為0 * failUp:上傳失敗的個數(shù),初始化為0 * count:第幾張 * length:圖片列表的長度 */ uploadOneByOne(url, imgPaths, successUp, failUp, count, length) { var that = this; wx.uploadFile({ url: url, //上傳地址地址 filePath: imgPaths[count], name: "file", //后臺接收的文件名 success: function(e) { successUp++; //成功+1 }, fail: function(e) { failUp++; //失敗+1 }, complete: function(e) { count++; //下一張 if (count == length) { TODO: 上傳完畢后跳轉(zhuǎn)頁面 wx.showToast({ title: '發(fā)布成功', icon: 'success', duration: 2000 }) } else { //遞歸調(diào)用,上傳下一張 that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length); } } }) },
4.后臺接口:
@PostMapping("/uploadImg") public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) { //該接口被多次調(diào)用,這里寫自己的業(yè)務(wù),省略。。。 return ""; }
文章參考:微信小程序?qū)崿F(xiàn)上傳多個文件 超過10個
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)上傳照片代碼實例解析
- uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題詳解
- 微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能
- 微信小程序?qū)崿F(xiàn)多文件或者圖片上傳
- 微信小程序?qū)崿F(xiàn)上傳圖片
- 微信小程序圖片上傳組件實現(xiàn)圖片拖拽排序
- 微信小程序?qū)崿F(xiàn)上傳圖片的功能
- 微信小程序?qū)崿F(xiàn)上傳多張圖片、刪除圖片
- 微信小程序?qū)崿F(xiàn)一張或多張圖片上傳(云開發(fā))
- 微信小程序?qū)崿F(xiàn)文件、圖片上傳功能
- 微信小程序?qū)崿F(xiàn)多張照片上傳功能
相關(guān)文章
用js實現(xiàn)終止瀏覽器對頁面HTML的繼續(xù)解析即停止解析 兼容firefox
用js實現(xiàn)終止瀏覽器對頁面HTML的繼續(xù)解析即停止解析 兼容firefox...2007-11-11JavaScript中手動實現(xiàn)Array.prototype.map方法
在前端開發(fā)中,我們經(jīng)常需要對數(shù)組進(jìn)行操作和處理,本文主要介紹了JavaScript中手動實現(xiàn)Array.prototype.map方法,具有一定的參考價值,感興趣的可以了解一下2024-02-02JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法實例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 像素檢測算法,結(jié)合實例形式詳細(xì)分析了javascript像素檢測碰撞算法的原理、實現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12JS使用iView的Dropdown實現(xiàn)一個右鍵菜單
這篇文章主要介紹了JS使用iView的Dropdown實現(xiàn)一個右鍵菜單功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05