引言:咱們在項目中常常會遇到圖片上傳的狀況,通常圖片上傳咱們爲了考慮性能和其餘因素,所以常常會設計爲將圖片數組循環單個圖片上傳;所以這就使用了promise的for循環ios
uploadImages(){ //總的圖片上傳函數 return new Promise((resolve, reject) => { let vm = this; let uploadNum = 0 console.log('imgParams',vm.imgParams) if (vm.imageTemArr.length > 0) { for(let i= 0;i<vm.imageTemArr.length;i++){ imageService.uploadImage(vm.imgParams, vm.imageTemArr[i]).then(res => { //單個圖片上傳函數 uploadNum++ if(uploadNum>=vm.imageTemArr.length){ // 從新獲取圖片 imageService.getImgInfo(vm.imgParams).then(res=>{ console.log('add 影像信息',res) let resData = res.result.record let resName = [] resData.forEach((item,index)=> { resName.push(item.file_name) }); let params = { "resType":vm.imgParams.resType, "tablePk":vm.imgParams.headerId, "resName":resName } console.log('this.addimgParams',this.imgParams) resolve("S"); }).catch(error=>{ reject("E"); }) } }).catch(error => { let vm = this; this.showPrompt('圖片上傳失敗,請從新點擊上傳!'); console.log("圖片上傳失敗,錯誤信息:" + error); reject("E"); }); } } }); }
話很少說先上代碼:數組
在這裏咱們貼出了總的函數代碼下面咱們將單個圖片上傳的接口貼出來promise
uploadImage(params, imgData){ let formData = new FormData(); console.log("params.documentNumber"+params.documentNumber); formData.append('documentNumber',params.documentNumber); // 單據編號 formData.append('userId',params.userId); // 上傳用戶 formData.append('resType',params.resType); // 單據類型 formData.append('file',imgData.file); // bolb二進制文件流 formData.append('fileName',imgData.imageName); // 文件名字 let url = process.env.ossUrl + "/pictures/upload"; return Axios.postFormData(formData,url); }
總結:咱們首先在uploadImages函數中return一個promise對象;在promise對象中首先聲明一個計數器uploadNum,用於記錄當前已經上傳圖片的個數;而後對於圖片數組進行循環調用單個圖片上傳函數uploadImage;uploadImage返回的也是一個promise對象,若是成功了則計數器uploadNum++;並判斷當前圖片是否是圖片數組中的最後一張圖片,若是是最後一張圖片,則從新調用圖片獲取接口,用於刷新圖片並resolve("S").app