大家好，又见面了，我是你们的朋友全栈君。
近日在使用uni.uploadFile上传图片时，碰到后端收到不到文件的问题，网上没有写uni-app java后端的处理实例，小程序到是有很多，但都是单文件上传，即使是多文件上传，也是采用一个for循环多次调用uploadFile函数，对文件一个一个提交。伪代码如下：
// 微信小程序为例：
for (var i = 0; i < filePaths.length; i++){
wx.uploadFile({
url:this.url,
filePath:filePaths[i],
name:'file',
formData:data,
header:{"Content-Type": "multipart/form-data"},
success: (res) =>{
if (res.data.code == 200){
console.log('上传成功');
}
}
})
}
uni-app的uni.uploadFile在5+APP支持多文件上传，后端处理多文件上传的时候与单文件上传有些不同之处。
一、单文件上传，首先是前端
uni.uploadFile({
url:this.url, // 后端api接口
filePath: filePaths[0], // uni.chooseImage函数调用后获取的本地文件路劲
name:'file', //后端通过'file'获取上传的文件对象
formData: this.sendDate,
header:{"Content-Type": "multipart/form-data"},
success:(res) => {
if (res.data.code == 200){
console.log('文件上传成功')
}
}
});后端处理单文件上传比较简单，代码如下：
@RequestMapping("/uploadFile")
public Result uploadFile(HttpServeletRequest request, @RequestParam("file")MultipartFile [] files){
// 这样就可以收到文件了，files.length == 1.
System.out.println(files.length);
// 后续操作省略
}二、多文件上传
前端代码：
// 文件路劲封装
let imgs = this.imageList.map((value, index) => {
return {
name: "image" + index,
uri: value
}
});
uni.uploadFile({
url:this.url,
files: imgs,
formData: this.sendDate,
header:{"Content-Type": "multipart/form-data"},
success: (res) => {
if (res.statusCode === 200) {
uni.showToast({
title: "反馈成功!"
});
}
}
})不一样的地方在于：单文件上传的filePath和name参数没有了，取而代之的是files，官方文档有明确说明
后端代码：
java后端处理多文件上传时，如果仍用单文件上传的后端代码，files.length总等于0，因为注解@ReqeustParam（”file”)里面的file在前端并没有这样设置并提交。
仔细分析uni-app官方文档对于uni.uploadFile函数的说明，知道该函数发起的请求，Content-type为multipart/form-data，于是便可以从request对象中获取MultipartFile。源码如下：
// 如下代码只保留了主逻辑
@RequestMapping("/uploadFile")
public Result uploadFile(HttpServletRequest request, FormData formData) throws IOException{
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
commonsMultipartResolver.setDefaultEncoding("utf-8");
if (commonsMultipartResolver.isMultipart(request)){
MultipartHttpServletRequest mulReq = (MultipartHttpServletRequest) request;
Map<String, MultipartFile> map = mulReq.getFileMap();
// key为前端的name属性，value为上传的对象（MultipartFile）
for (Map.Entry<String, MultipartFile> entry : map.entrySet()) {
// 自己的保存文件逻辑
saveOrUpdateImageFile(feedback.getId(), entry.getKey(), entry.getValue());
}
}
return Result.success();
}以上便是uni-app在5+APP上多文件上传的前后端处理代码，如有其他方法，欢迎留言交流。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/147987.html原文链接：https://javaforall.net
