uni-app uni.uploadFile上传图片前后端（java）详解

近日在使用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上多文件上传的前后端处理代码，如有其他方法，欢迎留言交流。

uni-app uni.uploadFile上传图片前后端（java）详解相关推荐

表白墙 -- 前后端代码详解
表白墙 -- 前后端代码详解一.前端二.后端实现 2.1 需求 2.2 创建项目及初始化 2.3 实现提交数据 (存档) 2.3.1 实现 doPost 2.3.2 构造请求 (修改 html 文 ...
前后端分离详解（转发）
前言本文转发自"Web项目聚集地"(点击蓝色字体即可跳转) 作者:松哥. 在看到这篇文章之前,我曾和团队的小伙伴一起开发过一个后台设备管理系统,其中就是使用前后端耦合的JSP方式 ...
Vue+Spring Boot实现图片验证码、邮箱验证码以及Cookie记住我功能(前后端代码详解)
Vue实现图片验证码.邮箱验证码以及Cookie记住我功能前言图片验证码实现 Vue前端实现 Spring Boot后端实现邮箱验证码实现 Vue前端实现 Spring Boot后端实现 Coo ...
前后端交互详解(建议收藏)
1.前后端认知相信很多人心里都有一个疑惑:我⼀个前端, 为什么要学习后端? 那么到底什么是前端? 什么是后端? 什么是数据库? 1.1 基本组织架构我们是⼀个前端开发⼯程师还有⼀个⼯作叫做后端 ...
php js后端渲染,webpack后端渲染详解
本文主要介绍了webpack配置之后端渲染详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. webpack配置之后端渲染2017年, vue, re ...
Java详解剑指offer面试题50--第一个只出现一次的字符
Java详解剑指offer面试题50–第一个只出现一次的字符找出字符串中找出第一个只出现一次的字符,比如输入"abacceff",则输出'b' 要想知道某个字符是不是只出现了一次 ...
php 显示要上传的图片格式,php判断文件上传图片格式的实例详解
php判断文件上传图片格式的实例详解判断文件图片类型, $type = $_FILES['image']['tmp_name'];//文件名 //$type = $this->getImage ...
java8编程开发入门李兴华_李兴华系列--JAVA详解视频(jdk1.8)及项目实战教程
李兴华系列--JAVA详解视频教程(jdk1.8)有源码+文档01_<Oracle从入门到精通> 02_<Java8编程入门> 03_<Java8面向对象编程> 0 ...
APP漏洞扫描器之本地拒绝服务检测详解
APP漏洞扫描器之本地拒绝服务检测详解作者:伊樵@阿里聚安全阿里聚安全的Android应用漏洞扫描器有一个检测项是本地拒绝服务漏洞的检测,采用的是静态分析加动态模糊测试的方法来检测,检测结果准确全 ...

uni-app uni.uploadFile上传图片前后端（java）详解

uni-app uni.uploadFile上传图片前后端（java）详解相关推荐

最新文章

热门文章