微信小程序多图片上传,ssm后台接收代码
时间: 2023-06-23 22:09:18 浏览: 135
微信小程序实现同时上传多张图片
以下是一个基于SSM框架的多图片上传代码示例:
1.前端代码(wxml):
```
<view>
<button bindtap="chooseImage">选择图片</button>
<button bindtap="uploadImage">上传图片</button>
<view wx:for="{{imageList}}" wx:key="index">
<image src="{{item}}" mode="aspectFill"></image>
</view>
</view>
```
2.前端代码(js):
```
Page({
data: {
imageList: [], // 图片列表
},
// 选择图片
chooseImage: function () {
var that = this;
wx.chooseImage({
count: 9 - that.data.imageList.length, // 最多可以选择9张图片
sizeType: ['compressed'], // 压缩图片
sourceType: ['album', 'camera'], // 可以从相册和相机选择图片
success: function (res) {
// 添加新选择的图片到列表
that.setData({
imageList: that.data.imageList.concat(res.tempFilePaths)
})
},
fail: function (res) {
console.log("图片选择失败:" + res.errMsg)
}
})
},
// 上传图片
uploadImage: function () {
var that = this;
if (that.data.imageList.length == 0) {
wx.showToast({
title: '请选择图片',
icon: 'none'
})
return;
}
wx.showLoading({
title: '上传中...',
})
// 循环上传每一张图片
for (var i = 0; i < that.data.imageList.length; i++) {
wx.uploadFile({
url: 'http://localhost:8080/upload/images', // 后台接口,需要根据实际情况修改
filePath: that.data.imageList[i],
name: 'image',
header: {
"Content-Type": "multipart/form-data"
},
formData: {
'user': 'test'
},
success: function (res) {
console.log("上传成功");
console.log(res);
that.setData({
imageList: [] // 清空图片列表
})
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon: 'success'
})
},
fail: function (res) {
console.log("上传失败");
console.log(res);
wx.hideLoading();
wx.showToast({
title: '上传失败',
icon: 'none'
})
}
})
}
}
})
```
3.后端代码(Java):
```
@RequestMapping(value = "/upload/images", method = RequestMethod.POST)
@ResponseBody
public String uploadImages(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 设置编码格式
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
// 获取文件
MultipartFile file = ((MultipartHttpServletRequest) request).getFile("image");
// 保存文件
File savePath = new File("d:/upload/images/");
if (!savePath.exists()) {
savePath.mkdirs();
}
String fileName = file.getOriginalFilename();
String saveFileName = System.currentTimeMillis() + fileName.substring(fileName.lastIndexOf("."));
File saveFile = new File(savePath, saveFileName);
file.transferTo(saveFile);
// 返回结果
JSONObject result = new JSONObject();
result.put("code", 0);
result.put("msg", "");
result.put("data", saveFileName);
return result.toJSONString();
}
```
这个示例中,前端使用了微信小程序提供的API选择和上传图片,后端使用了SSM框架提供的方法接收并保存图片。需要注意的是,这个示例只是一个简单的示例,实际的项目中需要根据具体情况进行修改。
阅读全文