微信小程序多张图片上传+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: {
        "Co
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值