小程序“账本小记”的意见反馈实现批量上传附件

效果图如下，上传之后提交实现批量上传

对应的源码分享

fedback.wxml文件：

<!--pages/my/feedback/feedback.wxml-->

<view class='view-page'>

  <navbar page-name="意见反馈"  showMy="{{true}}" showHome="{{false}}" showNav="{{false}}" showReport="{{false}}"></navbar>

  <view class='page-content' style='height:calc(100vh - {{navH}}px)'>

    <view class="container">

       <!--判断微信版本是否可用-->

      <view wx:if="canIUse">

        <view wx:if="{{isAuth}}">

          <view class="greyarea"></view>

          <view class="inputarea">

          <textarea class="fbinput" name="fbinfo" placeholder="请输入遇到的问题或建议..." auto-focus="true" value="{{fbcontent}}" bindinput="fbinput" maxlength="200" auto-height="true" bindlinechange="fblineaction"></textarea>

          <ivew class="wordcss"><view style="float: left;font-size:30rpx;padding-left:30rpx;">上传图片(选填)</view><view style="float:right;font-size:25rpx;padding-right:30rpx;">{{curword}}/200</view></ivew>

          </view>

          <view class="picture">

            <view class="upLoad">

              <view class="uplaodImgItem" wx:for="{{pic}}" wx:key="index">

                <image src="{{item}}"></image>

                <view class="deleteImg" bindtap="bindDeleteImg" data-index="{{index}}"><text class="iconfont icon-shanchu"></text></view>

              </view>

              <view class="uploadImg" bindtap="bindUpload"><text class="iconfont icon-shurukuang-shangchuantupian"></text></view>

            </view>

          </view>

 

          <button type="primary" lang="zh_CN" bind:tap="submitfb" style="margin:1rpx 30rpx;width:auto;background-color:#31D4FF;"><view style="height:35rpx;line-height:35rpx;font-size:30rpx;justify-content: center;" ><text>提交</text></view></button>

        

        </view>

        <view wx:else>未授权登录</view>

      </view>

      <view wx:else>请先升级微信</view>

    

    </view>

  

  </view>

</view>

 

wxss文件：

/* pages/my/feedback/feedback.wxss */

@import "../../../utils/iconfont.wxss";

.page-content{

  top:auto;

  position: relative;

}

.inputarea{

}

.fbinput{

  margin:30rpx;

  width: auto;

  min-height: 200rpx;

  justify-content: center;

  font-size: 30rpx;

  border: 1rpx solid rgb(235, 235, 235);

  background-color: rgb(245, 245, 245);

}

.wordcss{

  margin-right:30rpx;

}

.picture{

  background: #ffffff;

  margin-top:16rpx;

  margin-bottom:16rpx;

  padding:30rpx;

}

.upLoad{

  display: flex;

  align-items: center;

  flex-wrap: wrap;

}

.uplaodImgItem{

  width:160rpx;

  height:160rpx;

  margin-right:16rpx;

  position: relative;

}

.uplaodImgItem image{

  width:100%;

  height: 100%;

}

.deleteImg {

  position: absolute;

  width: 32rpx;

  height: 32rpx;

  background: rgba(0, 0, 0, 0.65);

  border-radius: 0px 4rpx 0px 200rpx;

  top: 0;

  right: 0;

  text-align: right;

  line-height: 24rpx;

}

.icon-shanchu {

  color: #ffffff;

  font-size: 26rpx;

}

.uploadImg{

  width:160rpx;

  height:160rpx;

  line-height: 160rpx;

  text-align: center;

  background: #dddde2;

  border-radius: 4rpx;

}

.icon-shurukuang-shangchuantupian{

  color:#859db6;

  font-size:50rpx;

}

 

.greyarea{

  height: 20rpx;

  width:100%;

  background-color: rgb(248,248,248);

}

.btarea{

  position:fixed;

  padding-left: 3%;

  padding-right: 3%;

  bottom: 1rpx;

  width:94%;

}

重点是处理逻辑js文件：

// pages/my/myledger/myledger.js

const app = getApp();

var util=require("../../../utils/util.js");

Page({

  /**

   * 组件的初始数据

   */

  data: {

    isAuth:null,//显示未授权

    navH:"",

    fbword:"",

    curword:0,

    pic:[],

    index:0,

    imgUrl:[],

    item:"",

  },

  //事件函数

  fbinput:function(e){

    var that=this;

    var value=e.detail.value;

    var wordlength=parseInt(value.length);

    if(wordlength>200){

      return;

    }

    that.setData({

      fbword:value,

      curword:wordlength

    });

  },

  fblineaction:function(options){

    let lineCount=options.detail.lineCount;

    let height=options.detail.height;

    let heightRpx=options.detail.heightRpx;

  },

  

  //删除图片

  bindDeleteImg:function(e){

    var imgIndex=e.currentTarget.dataset.index;

    var that=this;

    that.data.pic.map(function(item,index){

      if(imgIndex==index){

        that.data.pic.splice(index,1);

        that.setData({

          pic:that.data.pic

        })

      }

    })

    that.data.imgUrl.map(function(item,index){

      if(imgIndex==index){

        that.data.imgUrl.splice(index,1);

        that.setData({

          imgUrl:that.data.imgUrl

        })

      }

    })

  },

  //上传图片

  bindUpload:function(e){

    var that=this;

    var picLength=this.data.pic.length;

    var count=5-picLength;

    if(count !=0){

      wx.chooseImage({

        count:count,

        success:function(res){

          wx.showLoading({

            title: '上传中...',

          })

          const tempFilePaths=res.tempFilePaths;

          console.log("tempFilePaths的值",tempFilePaths)

          var i =0; //第几张图片的index

          var successImgCount=0; //成功图片数量

          var failImgCount=0; //失败图片数量

          var imgLength=res.tempFilePaths.length; //上传图片长度

          tempFilePaths.map(function(item,index){

            that.data.pic.push(tempFilePaths[index]);

          })

          console.log("that.data.pic====",that.data.pic)

          that.setData({

            pic:that.data.pic

          });

          wx.hideLoading();

          //util.uploadImg(that,tempFilePaths,successImgCount,failImgCount,imgLength,i);

          console.log("i的值",i)

        },

        fail:function(res){

          console.log(res);

        }

      })

    }else{

      wx.showToast({

        title: '最多上传5张',

        icon:"none"

      })

    }

  },

  //提交

  submitfb:function(){

    var fbword=this.data.fbword;

    var piclist=this.data.pic;

    console.log("fbword====",getApp().globalData.urlpath+"/feedback")

    console.log("piclist====",piclist)

    let file=[]

    for(let i=0;i<piclist.length;i++){

      const fileSystemManager=wx.getFileSystemManager()

      const data=fileSystemManager.readFileSync(piclist[i],'base64')

      file.push('【data:image/jpeg;base64,'+data+"】")

    }

    console.log("file==",file)

    wx.login({

      success:function(res){

        console.log("res.code===",res.code)

        //请求接口

        wx.request({

          url:getApp().globalData.urlpath+"/feedback",

          data:{"code":res.code,"picfile":file,"word":fbword},

          method:"POST",

          header:{'content-type':'application/x-www-form-urlencoded' },

          success:function(res){

            console.log("11111")

          },

          fail:function(res){

            console.log("22222")

          },

          complete:function(res){

            console.log("3333")

          }

        })

      }

    })

  },

  onLoad: function (options) {

    var that=this;

    that.setData({

      navH:app.globalData.navHeight

    })

    var authcache=wx.getStorageSync('authcache')

    var name=wx.getStorageSync('namecache')

    if(name){

      that.setData({

        isAuth:authcache

      })

    }

 

  },

 

  

})

更多源码关注公众号 py编码