不管是微信小程序還是支付寶小程序，上傳圖片的時候都只能單張上傳，當遇到復雜的應用場景時，比如下面這種情況：

在一個頁面中，有A、B、C三個模塊，每個模塊都可以選擇多張圖片，而且必須要在點擊?上傳圖片?按鈕之后才把圖片上傳給后臺服務器，最后就是提交成功之后，可以再次進行編輯，就是說在已經上傳過圖片之后，還可以在已有圖片的基礎上進行圖片添加，繼續上傳！?
那么在做這個需求的時候我們會遇到幾個問題：

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

帶著上面兩個問題，我們下面進行需求開發，以微信小程序為列：?
1.0首先我們要進行前端頁面結構的書寫，為了考慮復用性，所以如下面：

頁面結構樣式

<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處理邏輯

/*** 頁面的初始數據*/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, // 默認9 一次性最多可以選擇圖片張數sizeType: ['original'], // 可以指定original:原圖 compressed:壓縮圖sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有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,})},})},/*** 點擊圖片刪除按鈕刪除圖片*/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],})},/*** 點擊 上傳圖片 按鈕*/btnSave() {//1.0將需要上傳的圖片模塊區分開let arrs = ['a_img', 'b_img', 'c_img']let imgArrs = []//將所有的模塊圖片url地址存放到一個數組中let imgObjs = {}//用一個對象對圖片模塊進行標記for (let i = 0; i < arrs.length; i++) {//上傳圖片之前當然你要判斷當前模塊是否有需要上傳的圖片，現在默認所有模塊都有圖片需要上傳if (arrs[i].length > 0) {imgArrs.push(...this.data[arrs[i]])imgObjs[arrs[i]] = this.data[arrs[i]]}}this.setData({arrImgLength: 1 //設置上傳圖片從第一張圖片開始上傳 })console.log(imgArrs)console.log(imgObjs)this.testUpload(imgArrs, imgObjs)},/*** 將確定需要上傳的圖片進行上傳* imgArrs:需要上傳的所有圖片url地址數組* imgObjs：將不同圖片模塊放到一個對象里面*/testUpload: function (imgArrs, imgObjs) {const that = thisapi.policy({//如果你開發過小程序，就應該知道這是先前文檔定義好的獲取oss圖片id的后臺服務method: 'POST',data: {fc: 1},success: function (res) {if (res.data.code === 0) {let uploadData = res.data.data;wx.uploadFile({url: uploadData.auth.host, //僅為示例，非真實的接口地址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") {//表示圖片上傳成功了//將先前存儲的對象進行for in遍歷for (let key in imgObjs) {//將對象里面的數組進行遍歷for (let i = 0; i < imgObjs[key].length; i++) {//判斷當前上傳的圖片url地址和對象存儲的url地址是否一致if (imgObjs[key][i] == imgArrs[that.data.arrImgLength - 1]) {//如果url地址相同說明一致,這樣我們就能找到這個圖片屬于哪個模塊的了that.data[key + 'Id'].push(idData.id)//因為返回來的是代表圖片的id，所以也需要將id存儲起來 }}}console.log('成功上傳第：' + that.data.arrImgLength + '張')++that.data.arrImgLength//然后將圖片上傳的張數自加1//判斷當前上傳的圖片數是否大于存放所有圖片url地址的數組長度if (imgArrs.length < that.data.arrImgLength) {//如果大于說明已經沒有圖片需要上傳了console.log('所有圖片上傳完畢')} else {console.log('開始上傳第' + that.data.arrImgLength + '張')//如果不大于，說明還需要繼續上傳圖片，然后進行回調 that.testUpload(imgArrs, imgObjs)}}},fail: function (res) {wx.showModal({showCancel: false,title: '圖片上傳失敗',})},})}},fail: function (res) {}})},

?

?

?

ps:上面的方法解決了一個頁面多個圖片模塊多張圖片一次性全部上傳的情況，相當于解決了前面的問題1.0；下面解決問題2.0

?

轉載于:https://www.cnblogs.com/guhonghao/p/10818820.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。