微信小程序?qū)崿F(xiàn)同時上傳多張圖片

更新時間：2020年02月03日 14:23:06 作者：文龍z

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)同時上傳多張圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?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è)務，省略。。。
 return "";
}

文章參考：微信小程序?qū)崿F(xiàn)上傳多個文件超過10個

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: