您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關怎么在微信小程序中同時上傳多張圖片,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
1.圖片選擇后,路徑已經存入list中:
data: { images: [], //選擇的圖片 },
2.調用遞歸上傳的方法:
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; //總共上傳的數量 var count = 0; //第幾張,初始化為0 var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上傳的接口 //調用上傳圖片的公共函數 that.uploadOneByOne(url, that.data.images, successUp, failUp, count, length); }, });
3.遞歸上傳方法:
/** * 上傳圖片:遞歸的方式上傳 * url:上傳地址 * imgPaths:上傳的圖片列表 * successUp:上傳成功的個數,初始化為0 * failUp:上傳失敗的個數,初始化為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: 上傳完畢后跳轉頁面 wx.showToast({ title: '發布成功', icon: 'success', duration: 2000 }) } else { //遞歸調用,上傳下一張 that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length); } } }) },
4.后臺接口:
@PostMapping("/uploadImg") public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) { //該接口被多次調用,這里寫自己的業務,省略。。。 return ""; }
看完上述內容,你們對怎么在微信小程序中同時上傳多張圖片有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業資訊頻道,感謝大家的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。