不管是微信小程序還是支付寶小程序，上傳圖片的時(shí)候都只能單張上傳，當(dāng)遇到復(fù)雜的應(yīng)用場(chǎng)景時(shí)，比如下面這種情況：

在一個(gè)頁(yè)面中，有A、B、C三個(gè)模塊，每個(gè)模塊都可以選擇多張圖片，而且必須要在點(diǎn)擊?上傳圖片?按鈕之后才把圖片上傳給后臺(tái)服務(wù)器，最后就是提交成功之后，可以再次進(jìn)行編輯，就是說(shuō)在已經(jīng)上傳過(guò)圖片之后，還可以在已有圖片的基礎(chǔ)上進(jìn)行圖片添加，繼續(xù)上傳！?
那么在做這個(gè)需求的時(shí)候我們會(huì)遇到幾個(gè)問(wèn)題：

1.0：假如A模塊選擇了3張圖片；B模塊選擇了4張圖片；C模塊選擇了5張圖片，一次性全部上傳，怎么知道上傳的這張圖片是屬于A、B還是C?
2.0：假如上面1.0的問(wèn)題解決了，圖片上傳成功，我需要進(jìn)行第二次編輯，重新打開(kāi)這個(gè)頁(yè)面的時(shí)候會(huì)看到，A模塊已經(jīng)有3張圖片，B模塊已經(jīng)有4張圖片，C模塊已經(jīng)有5張圖片，于是我刪除了A模塊的1張圖片，刪除了B模塊的2張圖片，刪除了C模塊的3張圖片，然后重新給A模塊選擇了3張新圖片，給B模塊選擇了4張新圖片，給C模塊選擇了5張新圖片，然后重新上傳圖片！這個(gè)時(shí)候要知道對(duì)應(yīng)模塊刪除圖片的位置，還需要知道對(duì)應(yīng)模塊，哪些圖片是已經(jīng)上傳過(guò)的，不需要繼續(xù)上傳，哪些圖片是新圖片需要重新上傳的！

帶著上面兩個(gè)問(wèn)題，我們下面進(jìn)行需求開(kāi)發(fā)，以微信小程序?yàn)榱?#xff1a;?
1.0首先我們要進(jìn)行前端頁(yè)面結(jié)構(gòu)的書(shū)寫(xiě)，為了考慮復(fù)用性，所以如下面：

頁(yè)面結(jié)構(gòu)樣式

<template name='upLoadImg'><view class='upLoadImg_photos'> <view class='upLoadImg_title'> <text>{{title}} </text> </view><view class='upLoadImg_selectImgs'><block wx:for="{{data}}" wx:key="{{index}}"><view class="upLoadImg_box" data-index="{{index}}" data-type='{{type}}' bindtap='previewImage' ><image class='upLoadImg_missionImg' src='{{item}}'></image><image class='upLoadImg_delImg' catchtap='delImg' src='/img/CRM/icon_del@2x.png' data-index="{{index}}" data-type='{{type}}'></image></view></block><view bindtap='chooseImage' class='upLoadImg_chooseImage {{(data.length-1) % 4 == 0 ? "upLoadImg_chooseBox" : ""}}' data-type='{{type}}'>+</view></view> </view> </template><template is='upLoadImg' data='{{title:"A模塊 ",data:a_img,type:"a_img"}}' /> <template is='upLoadImg' data='{{title:"B模塊 ",data:b_img,type:"b_img"}}' /> <template is='upLoadImg' data='{{title:"C模塊 ",data:c_img,type:"c_img"}}' /><view class='taskButtom' bindtap='btnSave' >上傳圖片</view>

css樣式

.upLoadImg_photos{width:100%;padding:39rpx 30rpx 40rpx;box-sizing: border-box;border-bottom: 1rpx solid rgba(230, 230, 230, 1) } .upLoadImg_title{font-size:28rpx;font-family:PingFangSC-Regular;font-weight:400;color:rgba(102,102,102,1); } .upLoadImg_title>text:last-child{font-size: 26rpx; }.upLoadImg_selectImgs{display: flex;flex-wrap:wrap;width: 100%; } .upLoadImg_box{width:140rpx;height:140rpx;box-sizing: border-box;background-color: #fff;margin:39rpx 42rpx 0 0;text-align: center;border: 2rpx solid #f5f5f5;position: relative;border-radius:25rpx; } .upLoadImg_box:nth-of-type(4n),.upLoadImg_chooseBox{margin:39rpx 0 0 !important; } .upLoadImg_missionImg{width: 140rpx;height: 140rpx; } .upLoadImg_chooseImage{width: 140rpx;height:140rpx;line-height: 130rpx;border: 2rpx dashed #E1E1E6;box-sizing: border-box;font-size: 50rpx;text-align: center;margin:39rpx 0 0;color: #E1E1E6;border-radius:25rpx; } .upLoadImg_delImg{width: 30rpx;height: 30rpx;right:-15rpx;top:-15rpx;position: absolute; }.taskButtom{text-align: center;line-height: 90rpx;width:648rpx;height:90rpx;background:linear-gradient(267deg,rgba(85,235,255,1) 0%,rgba(28,145,242,1) 100%);box-shadow:0px 5rpx 40rpx 0px rgba(0,155,223,0.2);border-radius:45rpx;margin:80rpx auto;font-size:34rpx;font-family:PingFangSC-Medium;font-weight:500;color:rgba(255,255,255,1); }

js處理邏輯

/*** 頁(yè)面的初始數(shù)據(jù)*/data: {a_img: [],//存放A模塊圖片url地址b_img: [],//存放B模塊圖片url地址c_img: [], //存放C模塊圖片url地址a_imgId: [],//存放A模塊圖片上傳獲取的idb_imgId: [],//存放B模塊圖片上傳獲取的idc_imgId: [] //存放C模塊圖片上傳獲取的id },/*** 選擇圖片*/chooseImage(e) {const that = thislet type = e.currentTarget.dataset.typewx.chooseImage({count: 9, // 默認(rèn)9 一次性最多可以選擇圖片張數(shù)sizeType: ['original'], // 可以指定original:原圖 compressed:壓縮圖sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有success: function (res) {console.log(res.tempFiles)let imgUrl = []res.tempFiles.findIndex(function (value, index, arr) {imgUrl.push(value.path)})let images = that.data[type].concat(...imgUrl)that.setData({[type]: images,})},})},/*** 點(diǎn)擊圖片刪除按鈕刪除圖片*/delImg: function (e) {const that = this;const index = e.currentTarget.dataset.index;const sign = e.currentTarget.dataset.type;that.data[sign].splice(index, 1)that.setData({[sign]: that.data[sign],})},/*** 點(diǎn)擊 上傳圖片 按鈕*/btnSave() {//1.0將需要上傳的圖片模塊區(qū)分開(kāi)let arrs = ['a_img', 'b_img', 'c_img']let imgArrs = []//將所有的模塊圖片url地址存放到一個(gè)數(shù)組中let imgObjs = {}//用一個(gè)對(duì)象對(duì)圖片模塊進(jìn)行標(biāo)記for (let i = 0; i < arrs.length; i++) {//上傳圖片之前當(dāng)然你要判斷當(dāng)前模塊是否有需要上傳的圖片，現(xiàn)在默認(rèn)所有模塊都有圖片需要上傳if (arrs[i].length > 0) {imgArrs.push(...this.data[arrs[i]])imgObjs[arrs[i]] = this.data[arrs[i]]}}this.setData({arrImgLength: 1 //設(shè)置上傳圖片從第一張圖片開(kāi)始上傳 })console.log(imgArrs)console.log(imgObjs)this.testUpload(imgArrs, imgObjs)},/*** 將確定需要上傳的圖片進(jìn)行上傳* imgArrs:需要上傳的所有圖片url地址數(shù)組* imgObjs：將不同圖片模塊放到一個(gè)對(duì)象里面*/testUpload: function (imgArrs, imgObjs) {const that = thisapi.policy({//如果你開(kāi)發(fā)過(guò)小程序，就應(yīng)該知道這是先前文檔定義好的獲取oss圖片id的后臺(tái)服務(wù)method: 'POST',data: {fc: 1},success: function (res) {if (res.data.code === 0) {let uploadData = res.data.data;wx.uploadFile({url: uploadData.auth.host, //僅為示例，非真實(shí)的接口地址filePath: imgArrs[that.data.arrImgLength - 1] + '',//要上傳的資源路徑，也就是我們需要上傳的圖片url地址name: "file",formData: {key: uploadData.files[0] + "." + imgArrs[that.data.arrImgLength - 1].split(".")[imgArrs[that.data.arrImgLength - 1].split(".").length - 1],policy: uploadData.auth.policy,signature: uploadData.auth.signature,OSSAccessKeyId: uploadData.auth.accessid,success_action_status: "200",callback: uploadData.auth.callback,},success: function (res) {let idData = res.data ? JSON.parse(res.data) : {}if (idData.Status == "Ok") {//表示圖片上傳成功了//將先前存儲(chǔ)的對(duì)象進(jìn)行for in遍歷for (let key in imgObjs) {//將對(duì)象里面的數(shù)組進(jìn)行遍歷for (let i = 0; i < imgObjs[key].length; i++) {//判斷當(dāng)前上傳的圖片url地址和對(duì)象存儲(chǔ)的url地址是否一致if (imgObjs[key][i] == imgArrs[that.data.arrImgLength - 1]) {//如果url地址相同說(shuō)明一致,這樣我們就能找到這個(gè)圖片屬于哪個(gè)模塊的了that.data[key + 'Id'].push(idData.id)//因?yàn)榉祷貋?lái)的是代表圖片的id，所以也需要將id存儲(chǔ)起來(lái) }}}console.log('成功上傳第：' + that.data.arrImgLength + '張')++that.data.arrImgLength//然后將圖片上傳的張數(shù)自加1//判斷當(dāng)前上傳的圖片數(shù)是否大于存放所有圖片url地址的數(shù)組長(zhǎng)度if (imgArrs.length < that.data.arrImgLength) {//如果大于說(shuō)明已經(jīng)沒(méi)有圖片需要上傳了console.log('所有圖片上傳完畢')} else {console.log('開(kāi)始上傳第' + that.data.arrImgLength + '張')//如果不大于，說(shuō)明還需要繼續(xù)上傳圖片，然后進(jìn)行回調(diào) that.testUpload(imgArrs, imgObjs)}}},fail: function (res) {wx.showModal({showCancel: false,title: '圖片上傳失敗',})},})}},fail: function (res) {}})},

?

?

?

ps:上面的方法解決了一個(gè)頁(yè)面多個(gè)圖片模塊多張圖片一次性全部上傳的情況，相當(dāng)于解決了前面的問(wèn)題1.0；下面解決問(wèn)題2.0

?

轉(zhuǎn)載于:https://www.cnblogs.com/guhonghao/p/10818820.html

總結(jié)

以上是生活随笔為你收集整理的小程序之图片上传的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。