微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片的具體代碼,供大家參考,具體內(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:上傳成功的個(gè)數(shù),初始化為0
* failUp:上傳失敗的個(gè)數(shù),初始化為0
* count:第幾張
* length:圖片列表的長(zhǎng)度
*/
uploadOneByOne(url, imgPaths, successUp, failUp, count, length) {
var that = this;
wx.uploadFile({
url: url, //上傳地址地址
filePath: imgPaths[count],
name: "file", //后臺(tái)接收的文件名
success: function(e) {
successUp++; //成功+1
},
fail: function(e) {
failUp++; //失敗+1
},
complete: function(e) {
count++; //下一張
if (count == length) {
TODO: 上傳完畢后跳轉(zhuǎn)頁(yè)面
wx.showToast({
title: '發(fā)布成功',
icon: 'success',
duration: 2000
})
}
else {
//遞歸調(diào)用,上傳下一張
that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length);
}
}
})
},
4.后臺(tái)接口:
@PostMapping("/uploadImg")
public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) {
//該接口被多次調(diào)用,這里寫(xiě)自己的業(yè)務(wù),省略。。。
return "";
}
文章參考:微信小程序?qū)崿F(xiàn)上傳多個(gè)文件 超過(guò)10個(gè)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)上傳照片代碼實(shí)例解析
- uni-app開(kāi)發(fā)微信小程序之H5壓縮上傳圖片的問(wèn)題詳解
- 微信小程序?qū)崿F(xiàn)云開(kāi)發(fā)上傳文件、圖片功能
- 微信小程序?qū)崿F(xiàn)多文件或者圖片上傳
- 微信小程序?qū)崿F(xiàn)上傳圖片
- 微信小程序圖片上傳組件實(shí)現(xiàn)圖片拖拽排序
- 微信小程序?qū)崿F(xiàn)上傳圖片的功能
- 微信小程序?qū)崿F(xiàn)上傳多張圖片、刪除圖片
- 微信小程序?qū)崿F(xiàn)一張或多張圖片上傳(云開(kāi)發(fā))
- 微信小程序?qū)崿F(xiàn)文件、圖片上傳功能
- 微信小程序?qū)崿F(xiàn)多張照片上傳功能
相關(guān)文章
用js實(shí)現(xiàn)終止瀏覽器對(duì)頁(yè)面HTML的繼續(xù)解析即停止解析 兼容firefox
用js實(shí)現(xiàn)終止瀏覽器對(duì)頁(yè)面HTML的繼續(xù)解析即停止解析 兼容firefox...2007-11-11
JavaScript中手動(dòng)實(shí)現(xiàn)Array.prototype.map方法
在前端開(kāi)發(fā)中,我們經(jīng)常需要對(duì)數(shù)組進(jìn)行操作和處理,本文主要介紹了JavaScript中手動(dòng)實(shí)現(xiàn)Array.prototype.map方法,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06
JS/HTML5游戲常用算法之碰撞檢測(cè) 像素檢測(cè)算法實(shí)例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 像素檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript像素檢測(cè)碰撞算法的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單
這篇文章主要介紹了JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
js不同客戶端顯示不同廣告(pc端+移動(dòng)端+微信端)
這篇文章主要介紹了js不同客戶端顯示不同廣告(pc端+移動(dòng)端+微信端),比較適合自適應(yīng)網(wǎng)站的廣告,需要的朋友可以參考下2023-02-02
JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)字符串翻轉(zhuǎn)的方法,結(jié)合實(shí)例形式分析了javascript字符串使用reverse方法、字符串遍歷方法以及針對(duì)輸入字符串的遍歷、逆序輸出等方法實(shí)現(xiàn)字符串反轉(zhuǎn)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08

