Collect from 企业网站模板

mui从相册选取多张图片上传前后端代码

第一次登录送5个金币,绑定QQ送5个金币。金币可以用来观看视频和下载资源哦!

由于需要读取手机相册,所以先要调通手机和mui的真机测试,这里不多讲。主要来解决mui多图片上传的前后端问题。

 

先看效果图:

1.jpg

 hbuilder手机调试,控制台打印信息

image.png

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;
	} 

image.png

成功上传服务器

在此处输入评论

允许提问者通过qq联系我

    现在绑定QQ

点击加载更多...