小程序上传多张图片到springboot后台，返回可供访问的图片链接
最近在做小程序多图片上传到Java后台，Java后台是用springboot写的。也算是踩了不少坑，今天就来带大家来一步步实现小程序端多图片的上传。
首先看效果实现图
小程序端上传成功的回调
Java端接受到图片后的打印
链接可以直接在浏览器里打开查看
其实这两个截图就可以看出，我们图片上传成功了，并且给小程序前端返回了可供访问的图片url。
话不多说，直接看代码。
一，小程序端代码
1，wxml布局文件
其实页面很简答，一个上传按钮，一个选择图片按钮。一定要记得先选择图片，然后再点击图片上传。
2，js文件
再来看下js文件，js文件里最重要的就是uploadFile方法
uploadFile方法里我们请求自己的Java后台接口，进行图片上传。这里有些注意点要给大家说下
小程序每次只能上传单张图片
如果采用for循环进行上传请求 会出现并行上传，并行上传会出现某一个图片漏传的问题
我采用串行的思路,每张图片执行一次上传请求,请求响应成功后在调用请求上传第二张图片,以此类推 。
下面把完整的代码贴出来给到大家
Page({ data: { img_arr: [], formdata: '',
}, //点击发布按钮
formSubmit() { this.uploadFile(0)
}, //上传图片
uploadFile: function (index) { var that = this
//如果所有图片都已经上传完，就不再往下执行
if (index >= that.data.img_arr.length) { return
}
wx.uploadFile({ url: 'http://localhost:8080/upload/picture', //自己的Java后台接口地址
filePath: that.data.img_arr[index], name: 'content', header: { "Content-Type": "multipart/form-data", 'accept': 'application/json', 'Authorization': 'okgoodit' //若有token，此处换上你的token，没有的话省略
}, formData: ({ //上传图片所要携带的参数
username: "编程小石头", password: '2501902696'
}), success: function (res) { console.log(`第${index+1}张上传成功`, res)
index++
that.uploadFile(index)
},
fail(res) { console.log(`第${index+1}张上传失败`, res)
}
})
}, //选择要上传的图片
upimg: function () { var that = this; //这里小程序规定最好只能选9张，我这里随便填的3，你也可以自己改
if (this.data.img_arr.length < 3) {
wx.chooseImage({ sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
that.setData({ img_arr: that.data.img_arr.concat(res.tempFilePaths)
});
}
})
} else {
wx.showToast({ title: '最多上传三张图片', icon: 'loading', duration: 3000
});
}
},
})
代码里注释很清楚了。到这里小程序端基本上完事了。接下来我们看Java后台的实现。
二，Java后台代码
先来看后台代码目录，后台代码很简单，就是一个UploadController
这里的主要实现方法都在uploadPicture
@RequestMapping("/picture")
public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception { String filePath = "";
request.setCharacterEncoding("utf-8"); //设置编码
String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
File dir = new File(realPath); //文件目录不存在，就创建一个
if (!dir.isDirectory()) {
dir.mkdirs();
} try {
StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request; //获取formdata的值
Iterator<String> iterator = req.getFileNames(); String username = request.getParameter("username"); String password = request.getParameter("password"); String timedata = request.getParameter("timedata"); while (iterator.hasNext()) {
MultipartFile file = req.getFile(iterator.next()); String fileName = file.getOriginalFilename(); //真正写到磁盘上
String uuid = UUID.randomUUID().toString().replace("-", ""); String kzm = fileName.substring(fileName.lastIndexOf(".")); String filename = uuid + kzm;
File file1 = new File(realPath + filename);
OutputStream out = new FileOutputStream(file1);
out.write(file.getBytes());
out.close();
filePath = request.getScheme() + "://" +
request.getServerName() + ":"
+ request.getServerPort()
+ "/uploadFile/" + filename;
System.out.println("访问图片路径:" + filePath + "====username:" + username);
}
} catch (Exception e) {
logger.error("", e);
} return filePath;
}
这里我给大家讲下实现步骤
1，springboot对外提供接口供小程序访问
2，小程序上传单个图片和额外参数给后台
3，后台把图片写到本地，或者图片服务器，然后返回对应的图片url给到小程序端。
通过上图可以看出，Java后台返回了对应的图片url给前端，并且可以拿到小程序前端传的用户名。
我这里把完整的代码贴给大家。
package com.img.demo;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.support.StandardMultipartHttpServletRequest;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.File;import java.io.FileOutputStream;import java.io.OutputStream;import java.util.Iterator;import java.util.UUID;/**
* 图片上传
* 编程小石头
*/@RestController
@RequestMapping("/upload")
public class UploadController {
private static final Logger logger = LoggerFactory.getLogger(UploadController.class);
@RequestMapping("/picture")
public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception { String filePath = "";
request.setCharacterEncoding("utf-8"); //设置编码
String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
File dir = new File(realPath); //文件目录不存在，就创建一个
if (!dir.isDirectory()) {
dir.mkdirs();
} try {
StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request; //获取formdata的值
Iterator<String> iterator = req.getFileNames(); String username = request.getParameter("username"); String password = request.getParameter("password"); String timedata = request.getParameter("timedata"); while (iterator.hasNext()) {
MultipartFile file = req.getFile(iterator.next()); String fileName = file.getOriginalFilename(); //真正写到磁盘上
String uuid = UUID.randomUUID().toString().replace("-", ""); String kzm = fileName.substring(fileName.lastIndexOf(".")); String filename = uuid + kzm;
File file1 = new File(realPath + filename);
OutputStream out = new FileOutputStream(file1);
out.write(file.getBytes());
out.close();
filePath = request.getScheme() + "://" +
request.getServerName() + ":"
+ request.getServerPort()
+ "/uploadFile/" + filename;
System.out.println("访问图片路径:" + filePath + "====username:" + username);
}
} catch (Exception e) {
logger.error("", e);
} return filePath;
}
}
至于如何创建springboot项目这么基础的知识，我这里就不再给大家讲解了。
到这里，我们的小程序多图片上传就算大工告成了，后面我会录制相关的视频出来，感兴趣的同学可以关注“编程小石头”公众号，回复“多图片上传”，即可获取源码。
