微信小程式多張圖檔上傳

• • 思路
  • 效果圖
  • 實作過程

做項目需求要做一個評價上傳圖檔，這裡需要做多張圖檔上傳，需要圖檔一張一張的上傳然後在送出資料儲存。還有我寫這個部落格呢也是友善以後項目用到直接搬，後面項目頻繁使用會進行封裝元件

思路

用遞歸的方法，在每一張圖檔上傳完API傳回圖檔伺服器位址，用push函數添加到新數組，以此類推上傳完成儲存這個新數組即可

效果圖

實作過程

這裡的樣式、布局和圖檔顯示邏輯我用的是colorUI的表單元件 colorUI github位址：https://github.com/weilanwl/ColorUI

1.頁面布局

view

<view class="cu-bar bg-white margin-top">
    <view class="action">
        圖檔上傳
    </view>
    <view class="action">
        {{imgList.length}}/4
    </view>
</view>
<view class="cu-form-group">
    <view class="grid col-4 grid-square flex-sub">
        <view class="padding-xs bg-img" style="background-image:url({{imgList[index]}})" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
            <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
                <text class="icon-close"></text>
            </view>
        </view>
        <view class="padding-xs solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
            <text class="icon-cameraadd"></text>
        </view>
    </view>
</view>
           

2.頁面邏輯

頁面邏輯參考:https://www.jianshu.com/p/45f8281f45bd 感謝！

如果項目多出使用可以封裝成元件友善使用，因為我隻有一處使用就不封裝了！

const app = getApp();
Page({
    data: {
       imgList: [],
       fileImgList: [],
    },
    onLoad: function(options) {
        
    },
    ChooseImage() {//選擇圖檔
        wx.chooseImage({
            count: 4, //預設9
            sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，預設二者都有
            sourceType: ['album'], //從相冊選擇
            success: (res) => {
                if (this.data.imgList.length != 0) {
                    this.setData({
                        imgList: this.data.imgList.concat(res.tempFilePaths)
                    })
                } else {
                    this.setData({
                        imgList: res.tempFilePaths
                    })
                }
            }
        });
    },
    ViewImage(e) {//檢視圖檔
        wx.previewImage({
            urls: this.data.imgList,
            current: e.currentTarget.dataset.url
        });
    },
    DelImg(e) {//删除圖檔
        this.data.imgList.splice(e.currentTarget.dataset.index, 1);
        this.setData({
            imgList: this.data.imgList
        })
    },
    Submission(e){
    	var then = this
        var imgList = then.data.imgList
		then.uploadimg({
            url: app.globalData.appUrl//API接口位址
           	path: imgList,
        });
    },
   	uploadimg: function(data) {
       var then = this,
           i = data.i ? data.i : 0,
           success = data.success ? data.success : 0,
           fail = data.fail ? data.fail : 0;

       wx.showLoading({
           title: '上傳中...',
           mask: true,
       })
       wx.uploadFile({
           url: data.url,
           filePath: data.path[i],
           name: 'img',
           formData: 'null',
           success: function(res) {
               wx.hideLoading();
               success++;
               var str = res.data //傳回的結果，可能不同項目結果不一樣
               var pic = JSON.parse(str);
               var pic_name = pic.img;
               var fileImgList = then.data.fileImgList;
               fileImgList.push(pic_name)//上傳後傳回的圖檔位址組成新數組 送出資料時送出
           },
           fail: function(res) {
               fail++;
               console.log('fail:' + i + "fail:" + fail);
           },
           complete: function(res) {
               i++;
               if (i == data.path.length) {
               		//圖檔傳完，則繼續調用函數送出内容和圖檔位址數組儲存
                   then.uploadForm()
               } else { //若圖檔還沒有傳完，則繼續調用函數
                   data.i = i;
                   data.success = success;
                   data.fail = fail;
                   then.uploadimg(data);
               }
           },
       })
   	},

})
           

使用代碼有問題歡迎聯系Q：1121027880，有錯誤也希望大家指出謝謝