微信小程序多张图片上传+springboot图片上传处理_小程序上传多过个图片 传给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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

**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 = JSON.parse(res.data)
        if (resJson.bl) {
          // wx.showToast({
          //   title: '第' + (i+1) + '张上传成功',
          //   icon: 'none'
          // })
          console.info('第' + (i + 1) + '张上传成功')

          i++
          imgUpload(images, competitionId, i)

        } else {
          wx.showToast({
            title: '第' + (i+1) + '张上传失败',
            icon: 'none'
          })
          return
        }

      }
    })

  }else{
    wx.showToast({
      title: '图片全部上传完成',
      icon: 'none'
    })
    wx.hideLoading()
    wx.navigateBack({
      
    })
  }
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: []

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    competitionId = options.competitionId;
    //已上传图片回显
    wx.request({
      url: app.data.basePath + 'competition/getCompetitionById',
      data: { competitionId: competitionId},
      method:'GET',
      success:function(res){
        competition = res.data
        console.info(competition)
        var imges = []
        console.info(competition.image3 )
        if (competition.image1 != null && competition.image1 != undefined && competition.image1 != ''){
          imges.push(app.data.basePath + 'fileUpload/downloadImg?filePath=' + competition.image1)
          imgCount++

        }
        if (competition.image2 != null && competition.image2 != undefined && competition.image2 != '') {
          imges.push(app.data.basePath + 'fileUpload/downloadImg?filePath=' + competition.image2)
          imgCount++
        }
        if (competition.image3 != null && competition.image3 != undefined && competition.image3 != '') {
          imges.push(app.data.basePath + 'fileUpload/downloadImg?filePath=' + competition.image3)
          imgCount++
        }
        console.info(imges)
        that.setData({
          images: imges
        })
        that.setData({
          images: that.data.images
        })
        console.info(that.data)
      }

    })
    

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
  * 用户点击右上角分享
  */
  onShareAppMessage: function () {
    return {
      title: '海大高尔夫',
      desc: '点击进入小程序',
      path: '/pages/index/index'
    }
  },
  chooseImage(e) {
    var that = this
    wx.chooseImage({
      count: 3,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        const images = this.data.images.concat(res.tempFilePaths)
        this.data.images = images.length <= 3 ? images : images.slice(0, 3)
        that.setData({
          images: this.data.images
        })
      }
    })
  },
  removeImage(e) {
    const idx = e.target.dataset.idx
    this.data.images.splice(idx, 1)
    this.setData({
      images: this.data.images
    })
    imgCount--
  },
  handleImagePreview(e) {
    const idx = e.target.dataset.idx
    const images = this.data.images
    wx.previewImage({
      current: images[idx],
      urls: images,
    })
  },
  //上传图片
  submitForm(e) {
    var that = this
    if(imgCount > 0){
      common.showToast('请删除重新选择',1000)
      return
    }
    var images = this.data.images
    if (images.length == 0){
      common.showToast('没有选择图片', 1000)
      return
    }
    wx.showLoading({
      title: '上传中',
      task: true
    })
    // 比赛图片上传
    imgUpload(images, competitionId,0)

  },
  //删除比赛图片
  deleteCompetitionImg:function(){
    var that = this
    wx.showModal({
      title: '提示',
      content: '此操作将删除该比赛位于服务器上的所有比赛图片,确定进行此操作吗?',
      success:function(){
        wx.request({
          url: app.data.basePath + 'competition/deleteCompetitionImg',
          method: 'GET',
          data: { competitionId: competitionId },
          success: function (res) {
            if (res.data.bl) {
              common.showToastSuccess('已清空服务器图片')
              that.setData({
                images: []
              })
              imgCount = 0
            } else {

            }
          }
        })
      }
    })

  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241

spring boot后台代码

控制层 :

/**
	  * 比赛图片上传
	  * 方法名: competitionImgUpload
	  * 描述: TODO(这里用一句话描述这个方法的作用) 
	  * 参数：  @param file
	  * 参数：  @param request
	  * 参数：  @return
	  * 创建人: 于占峰
	  * 创建时间: 2019年8月26日 下午4:52:07
	  * 版本号: v1.0   
	  * 抛出异常: 
	  * 返回类型: ResultJson
	 */
	@RequestMapping("competitionImgUpload")
	@ResponseBody
	public ResultJson competitionImgUpload(@RequestParam("uploadfile_img") MultipartFile file,HttpServletRequest request,String imgIndex,String competitionId ) {
		ResultJson resJson = new ResultJson();
		// 判断是否传输了文件
		if (file.isEmpty() || null == competitionId) {
			resJson.setBl(false);
			resJson.setMsg("上传失败");
			return resJson;
		}
		return  competitionService.ImgUpload(file,request,imgIndex,competitionId);
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

图片回显的控制层代码:

	/**
	 * 
	  * 方法名: downloadImg
	  * 描述: TODO(图片回显) 
	  * 参数：  @param response
	  * 参数：  @param filePath
	  * 创建人: 于占峰
	  * 创建时间: 2019年8月26日 下午5:47:53
	  * 版本号: v1.0   
	  * 抛出异常: 
	  * 返回类型: void
	 */
	@RequestMapping("downloadImg")
	public void downloadImg(HttpServletResponse response,String filePath){
		
		FileUtil.downloadFile(response, filePath);
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上传保存回显所用的util插件:

/**
 * 
 */
package com.yzf.golf.util;

import java.io.BufferedInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.OutputStream;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.util.ResourceUtils;
import org.springframework.web.multipart.MultipartFile;

/**
 * @ClassName: FileUtil 
 * @author 于占峰
 * @Description: TODO(这里用一句话描述这个类的作用) 
 * @date 2019年8月26日 下午5:01:04
 */
public class FileUtil {
    /**.
      * 方法名: saveFile
      * 描述: TODO(上传并保存文件,返回路径) 
      * 参数：  @param picFile
      * 参数：  @return
      * 创建人: 于占峰
      * 创建时间: 2019年8月26日 下午5:02:25
      * 版本号: v1.0   
      * 抛出异常: 
      * 返回类型: String
     */
	public static String saveFile(MultipartFile picFile) {
		String location = null;
		if(!picFile.isEmpty()){
			//得到真实路径
			String fileName = picFile.getOriginalFilename();
			String kzm = fileName.substring(fileName.lastIndexOf("."));
			//要保存的文件名
			String destName = UUID.randomUUID().toString()+kzm;
			//取得上传文件存储路径
			String path = Const.FILE_PATH;
			//如果上传文件存储路径不存在则创建一个
			File s2 = new File(path);
			if (s2.exists()==false) {
				s2.mkdirs();
			}
			//文件路径
			location = path+"/"+destName;
			try {
				picFile.transferTo(new File(location));
			} catch (IllegalStateException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return location;
	}
	
    /**.
     * 方法名: saveFile
     * 描述: TODO(上传并保存文件至项目同级目录下,返回路径) 
     * 参数：  @param picFile
     * 参数：  @return
     * 创建人: 于占峰
     * 创建时间: 2019年8月26日 下午5:02:25
     * 版本号: v1.0   
     * 抛出异常: 
     * 返回类型: String
     * @throws FileNotFoundException 
    */
	public static String saveFileForRealPath(MultipartFile picFile,HttpServletRequest request){
		String location = null;
		if(!picFile.isEmpty()){
			//得到真实路径
			String fileName = picFile.getOriginalFilename();
			String kzm = fileName.substring(fileName.lastIndexOf("."));
			//要保存的文件名
			String destName = System.currentTimeMillis()+kzm;
			//取得上传文件存储路径
			//获得根目录
			File path = null;
			try {
				path = new File(ResourceUtils.getURL("upload").getPath());
				System.out.println(path);
			} catch (FileNotFoundException e1) {
				e1.printStackTrace();
			}
			//设置文件存放在与jar包同级的upload目录下
			File s2 = new File(path.getAbsoluteFile(),"");
			//如果上传文件存储路径不存在则创建一个
			if (s2.exists()==false) {
				s2.mkdirs();
			}
			//文件路径
			location = path+"/"+destName;
			try {
				picFile.transferTo(new File(location));
			} catch (IllegalStateException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return location;
	}
     /**
      * 
       * 方法名: deleteFileByUrl
       * 描述: TODO(根据路径删除文件) 
       * 参数：  @param url
       * 创建人: 于占峰
       * 创建时间: 2019年8月26日 下午5:02:04
       * 版本号: v1.0   
       * 抛出异常: 
       * 返回类型: void
      */
	public static void deleteFileByUrl(String url){
		if(url!=null){
			File file = new File(url);
			if(file.exists()){
				file.delete();
			}
		}
	}
	
     /**
       * 方法名: downloadFile
       * 描述: TODO(文件下载) 
       * 参数：  @param response
       * 参数：  @param location
       * 创建人: 于占峰
       * 创建时间: 2019年8月26日 下午5:01:48
       * 版本号: v1.0   
       * 抛出异常: 
       * 返回类型: void
      */
	public static void downloadFile(HttpServletResponse response,String location){
		//判断文件是否存在
		File s2 = new File(location);
		if (!s2.exists()) {
			return;
		}
		String fileName = location.substring( location.lastIndexOf("/")+1 );
		response.setHeader("content-type", "application/octet-stream");
		response.setContentType("application/octet-stream");
		response.setHeader("Content-Disposition", "inline;filename=" + fileName);
		byte[] buff = new byte[1024];
		BufferedInputStream bis = null;
	    OutputStream os = null;
		try {
			os = response.getOutputStream();
			bis = new BufferedInputStream(new FileInputStream(new File(location)));
			int i = bis.read(buff);
			while (i != -1) {
				os.write(buff, 0, buff.length);
				os.flush();
				i = bis.read(buff);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally{
			if (bis != null) {
		        try {
		          bis.close();
		        } catch (IOException e) {
		          e.printStackTrace();
		        }
		     }
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181