微信小程序多张图片上传+springboot图片上传处理

微信小程序页面上传多张图片,带已上传图片回显,后台SpringBoot以jar包形式部署,上传保存到jar包同级目录

摘自最近写的小程序其中的一个功能片段
前端微信小程序上传图片 后台spring boot接取 因为要以jar包的形式进行部署 所以把文件保存业务改为保存在jar同级的目录
因为小程序只能每次上传一张图片 如果采用for循环进行上传请求 会出现并行上传,而且当我们需要上传完成进行返回上一页面操作时便会出现上传图片请求发出,还没有返回结果便跳页,有时候只上传成功了一部分图片的奇怪问题,于是我采用串行的思路,每张图片执行一次上传请求,请求响应成功后在调用请求上传第二张图片,以此类推 下面贴出前后端代码 希望对大家有所帮助,同时也再次梳理一下自己的业务实现
小程序页面

xml代码

  <view class="question-images-area">
    <!--已上传图片-->
    <view>
    <text style="color:red">
    温馨提示:
    1.每次至少选择一张图片  
    2.非首次上传,需要将页面内已上传图片删除重新选择
    3.本次上传操作会覆盖对应比赛已上传的所有图片 
    </text>
    </view>
    <!-- 添加图片按钮  -->
    <view class="question-images-tool">
      <button type="default" size="mini" bindtap="chooseImage" wx:if="{
  {images.length < 3}}">添加图片</button>
    </view>

    <!-- 图片缩略图  -->
    <view class="question-images">
      <block wx:for="{
  {images}}" wx:key="*this">
        <view class="q-image-wrap">
          <image class="q-image" src="{
  {item}}" mode="aspectFill" data-idx="{
  {index}}" bindtap="handleImagePreview"></image>
          <view class="q-image-remover" data-idx="{
  {index}}" bindtap="removeImage">删除</view>
        </view>
      </block>
    </view>

  </view>

  <!-- 提交表单按钮  -->
  <button class="weui-btn" type="primary" bindtap="submitForm">提交</button>

  <button class="weui-btn" type="primary" bindtap="deleteCompetitionImg">删除所有比赛图片</button>

**js代码 **

// pages/uploadImgFile/upload/upload.js
var app = getApp()
var common = require("../../../utils/util.js");
var competitionId
var competition
var imgCount = 0
//图片上传
var imgUpload = function (images, competitionId, i) {
  if( i != images.length){
    wx.uploadFile({
      url: app.data.basePath + 'fileUpload/competitionImgUpload',
      filePath: images[i],
      name: 'uploadfile_img',
      formData: {
        'imgIndex': i,
        competitionId: competitionId
      },
      header: {
        "Content-Type": "multipart/form-data"
      },
      success: function (res) {
        var resJson