uniapp如何上传图片-金沙1005

近日在使用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 map = mulreq.getfilemap();
			
        // key为前端的name属性，value为上传的对象（multipartfile）
        for (map.entry entry : map.entryset()) {
            // 自己的保存文件逻辑
            saveorupdateimagefile(feedback.getid(), entry.getkey(), entry.getvalue());
        }  
    }      
    return result.success();
	
}

以上便是uni-app在5 app上多文件上传的前后端处理代码，如有其他方法，欢迎留言交流。