微信小程序實現(xiàn)同時上傳多張圖片
更新時間：2020年02月03日 14:23:06 作者：文龍z
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)同時上傳多張圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現(xiàn)同時上傳多張圖片的具體代碼，供大家參考，具體內容如下
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; //總共上傳的數(shù)量
var count = 0; //第幾張，初始化為0
var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上傳的接口
//調用上傳圖片的公共函數(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: 上傳完畢后跳轉頁面
wx.showToast({
title: '發(fā)布成功',
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) {
//該接口被多次調用，這里寫自己的業(yè)務，省略。。。
return "";
}
文章參考：微信小程序實現(xiàn)上傳多個文件 超過10個
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)飛舞的泡泡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
詳解JavaScript+Canvas繪制環(huán)形進度條
canvas可以在頁面中設定一個區(qū)域，再利用JavaScript動態(tài)地繪制圖像。本文將利用canvas繪制一個可以動的環(huán)形進度條。文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試2022-02-02
這篇文章主要介紹了微信公眾號獲取用戶地理位置并列出附近的門店的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要和大家分享一個微信小程序的示例代碼，可以實現(xiàn)手寫簽名的效果。文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-02-02
微信小程序使用uni-app實現(xiàn)首頁搜索框導航欄功能詳解
這篇文章主要介紹了微信小程序使用uni-app實現(xiàn)首頁搜索框導航欄功能，uni-app?是一個使用?Vue.js?(opens?new?window)開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序2022-10-10
Javascript取整函數(shù)及向零取整幾種常用的方法
這篇文章主要介紹了Javascript取整函數(shù)及向零取整幾種常用的方法,每種方法都有其特點和適用場景,推薦使用Math.trunc(),因為它語義明確、代碼易讀且性能較好,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了純js實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Javascript連接數(shù)據(jù)庫查詢并插入數(shù)據(jù)
這篇文章主要介紹了Javascript連接數(shù)據(jù)庫查詢并插入數(shù)據(jù)，下面文章圍繞主題展開詳細內容，具有一的參考價值，需要的小伙伴可以參考一下，希望對你的學習有所幫助2022-03-03
在uni-app官網上發(fā)現(xiàn)uni-app不支持H5掃碼功能,但是下面的提示說明可以通過微信的JS-SDK實現(xiàn)掃碼功能,下面這篇文章主要給大家介紹了關于uniapp實現(xiàn)微信H5掃碼功能的完整步驟,需要的朋友可以參考下2022-11-11
一段字符串 里面包含了 要執(zhí)行的函數(shù)和參數(shù)等，需要去執(zhí)行這段字符串。2010-03-03