mui从相册选取多张图片上传前后端代码 查看视频密码
第一次登录送5个金币,绑定QQ送5个金币。金币可以用来观看视频和下载资源哦!
由于需要读取手机相册,所以先要调通手机和mui的真机测试,这里不多讲。主要来解决mui多图片上传的前后端问题。
先看效果图:
hbuilder手机调试,控制台打印信息
mui代码,有几个需要注意的点
1.上传图片的key不可以重复;
2.上传图片时我传入的是图片物理路径,请确保路径不要传错;
3.其他参数传递,我这里需要传递一个uid到后台;
4.避免图片重复上传,用户多次读取相册会显示已经选择的图片。
代码:
<button class="mui-btn mui-btn-primary mui-btn-block" onclick="galleryImgs()">按时间分类</button> //页面上上传按钮绑定galleryImgs()
var lfs = null; // 保留上次选择图片列表 function galleryImgs() {//该方法是冲相册里读取图片的方法 console.log("从相册中选择图片"); plus.gallery.pick(function(e) { var allfs=e.files;//返回相册所有勾选的图片 var fs=[];//记录需要上传的图片 if(lfs!=null){ for(var i=0;i<allfs.length;i++){ if(i>=lfs.length){ //吧勾选的所有图片和已经上传的图片进行对比,赛选出需要进行上传的图片,这样就避免了图片的重复上传 fs.push(allfs[i]); } } lfs=allfs; }else{ lfs = allfs; fs=allfs; } uploadFile(fs);//上传图片的方法,在下面 }, function(e) { console.log("取消选择图片"); }, { filter: "image", multiple: true,//支持多图片选择 system: false, selected: lfs,//多次进入相册,显示已选择的图片 }); } //上传的方法 function uploadFile(fs) { var wt = plus.nativeUI.showWaiting(); var task = plus.uploader.createUpload(server_path+"/photos/my/upimgs?uid=1", { method:"POST", timeout: 0, priority: 100//优先级 }, function(t, status) { //上传完成 if(status == 200) { console.log("上传成功:"+ status); wt.close(); } else { console.log("上传失败:"+ status); mui.toast("上传失败") wt.close(); } } ); //task.addData("uid",1);获取不到参数,我采用的是url传值 for(var i = 0; i < fs.length; i++) { var f = fs[i]; console.log(f); task.addFile(f, { key:"files"+i, }); } task.start(); }
后端springmvc,之前一直有一个误区,那就是后端用一个MultipartFile数组来接收图片,结果怎么也接收不到。原因:MultipartFile数组是同名的,但是mui的图片上传的key却是唯一,两者不是矛盾么?
解决方法,修改springmvc的接收参数,统一接收所有的file,然后通过filename来获取f单个的file;
代码:
@ResponseBody @RequestMapping(value = "/my/upimgs", method = RequestMethod.POST) public Object upPwd( HttpServletRequest request) throws IOException { MessUtil m=new MessUtil(); Integer uid=Integer.parseInt(request.getParameter("uid")); MultipartHttpServletRequest mReq = (MultipartHttpServletRequest) request; //获取文件的id---对应MUI上传时addFile时里面的Key,也就是mui传过来的files0,files1,files2,,,, Iterator<String> file_names = mReq.getFileNames(); while(file_names.hasNext()) { try { //获取文件id对应的文件 MultipartFile file = mReq.getFile(file_names.next()); if(file!=null&&file.getSize()>0){ UploadFile.upimg(file, request,Sys.Upimg.photo);//自己封装的上传图片的方法,这里不多说了 } }catch(Exception e) { e.printStackTrace(); } } m.setStatus(1); m.setMsg("上传成功"); return m; }
成功上传服务器