uni-app uni.uploadFile上传图片前后端(java)详解

uni-app uni.uploadFile上传图片前后端(java)详解近日在使用uni.uploadFile上传图片时,碰到后端收到不到文件的问题,网上没有写uni-appjava后端的处理实例,小程序到是有很多,但都是单文件上传,即使是多文件上传,也是采用一个for循环多次调用uploadFile函数,对文件一个一个提交。伪代码如下://微信小程序为例:for(vari=0;i<filePaths.length;i++){…

大家好,又见面了,我是你们的朋友全栈君。

近日在使用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,官方文档有明确说明

uni-app uni.uploadFile上传图片前后端(java)详解

后端代码:

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

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147987.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 吞食鱼2(FeedingFrenzyTwo) 修改器[通俗易懂]

    吞食鱼2(FeedingFrenzyTwo) 修改器[通俗易懂]童年回忆系列。小时候特别喜欢玩这类游戏,软件不大,很慢的网速也不会下载太久,然后对配置要求不高,很破的电脑也可以玩得很开心。不过也有糟心的时候啊,大鱼太多,无数次死于挑战咬梭子鱼的尾巴……今年最后一天

  • h3c 配置ssh登录_H3交换机SSH跳转

    h3c 配置ssh登录_H3交换机SSH跳转1.system-view2.public-keylocalcreatersasshserverenable3.user-interfacevtyvty号(04)authentication-modescheme上述操作是设置一个VTY的,如果允许同时登陆多个,需要登几个就设几个VTY,重复上面俩操作即可protocolinboundall4.q…

  • jboss 配置文件_黑果小兵安装教程

    jboss 配置文件_黑果小兵安装教程一、Jboss下载:  1、点击 http://jbossas.jboss.org/downloads/找到合适的版本下载;  我这里是用的Jboss-as-7.1.1.Final版本,算是比较新的一个版本。    二、Jboss安装:  1、首先将下好的Jboss解压到自己想要存放的位置;  2、配置环境变量(非必要步骤),建议还是将环境变量配好,便于dos中命令操作;   …

  • 如何备份mysql_史上最全的MYSQL备份方法

    如何备份mysql_史上最全的MYSQL备份方法本人曾经用过的备份方式有:mysqldump、mysqlhotcopy、BACKUPTABLE、SELECTINTOOUTFILE,又或者备份二进制日志(binlog),还可以是直接拷贝数据文件和相关的配置文件。MyISAM表是保存成文件的形式,因此相对比较容易备份,上面提到的几种方法都可以使用。Innodb所有的表都保存在同一个数据文件ibdata1中(也可能是多个文件,或者是独立的表…

  • kettle工具内存溢出

    kettle工具内存溢出在使用kettle软件时,出现内存溢出现象,OutOfMemory:GCoverheadlimitexceeded在kettle路径下,找到Spoon.bat并用编辑器打开,找到将其中-Xmx5120m变大,最好是256的整数倍,这是我修改后的;也可以改变MaxPermSize最大值,运行时最大,也可以。…

  • 拆解滴滴大脑 叶杰平谈出行领域算法技术

    拆解滴滴大脑 叶杰平谈出行领域算法技术近日,滴滴研究院副院长叶杰平在上海一场内部分享会上详细解读了滴滴大脑,这是外部首次窥探到较为完整的滴滴算法世界,并且一直潜水的产品“九霄”也首次露出真容。滴滴出行研究院副院长叶杰平滴滴大脑由三部分组成叶杰平将滴滴大脑这个智能系统分为三部分,分别是大数据、机器学习和云计算。其中大数据就像工业革命时代的煤一样举足轻重,人工智能需要数据进行训练,纵观应用级深度学习的成功案例,他们都获得了海量数据,…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号