JS实现批量图片上传

青旅半醒 2023-03-13 11:50 25阅读 0赞

# **应业务方要求，实现批量图片上传** #

1、HTML代码（data-form-data是设置参数）

2、JS代码（批量上传要点 singleFileUploads: false）

// 批量上传
        $('#fileuploadBatch').fileupload({
            dataType: 'json',
            singleFileUploads: false,  // false表示支持批量上传
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            done: function (e, data) {
                
            },
            progressall: function (e, data) {
            }
        });

3、后台代码

@RequestMapping(value = { "/report/uploadBatch" }, method = { RequestMethod.POST })
    	@ResponseBody
    	public Map<String,Object> uploadBatch(MultipartHttpServletRequest request) {
    		List<MultipartFile> files = request.getFiles("uploadBatch[]");
    		// js上传图片传的参数（可用于后台逻辑判断）
    		String nameType = request.getParameter("nameType");
    		String position = request.getParameter("position");
    		Map<String,Object> map = new HashMap<>();
    		try {
    			// 如果是批量上传
    			for (MultipartFile mpf : files) {
    				InputStream in = new ByteArrayInputStream(mpf.getBytes());
    				// 获取文件全称
    				String name = mpf.getOriginalFilename();
    				logger.info(name+", "+mpf.getContentType()+", "+mpf.getSize());
    				// 获取文件类型
    				String imgType = name.substring(name.lastIndexOf(".") + 1);
    				// 获取文件名称
    				String imgName = name.substring(0, name.lastIndexOf("."));
    				// 图片保存服务器(调用保持到服务器的接口)
    				String savePath = "";
    				// 用于前台展示图片
    				map.put("img_"+imgName,savePath);
    			}
    			return map;
    		} catch (Exception e) {
    			e.printStackTrace();
    			throw new BusinessException("上传文件失败");
    		}
    	}

搞定，发布一波！

发布到测试环境之后发现上传图片总大小超过10M会直接报413，因为*[Nginx][]设置了上传大小最大为10M*

优化一波：

1.1. HTML代码（multiple="multiple"可以选择多张图片，去掉则只能单张图片选中）

2.1 JS代码

//选择图片，马上预览
        function xmTanUploadImg(obj) {
            var fl=obj.files.length;
    		var flag = false;
            for(var i=0;i<fl;i++){
                var file=obj.files[i];
                // 表单对象，用于将文件传到后台
                var formData = new FormData();
                formData.append('imgFile', file);
                $.ajax({
                    url : "/report/uploadInBatches.json",
                    type : "post",
                    dataType: 'json',
                    cache: false,
                    data:formData,
                    processData: false,
                    contentType: false,
                    success: function(result) {
    
                    }
                });
            }
        }

属性说明：

processData：默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false

contentType：默认值为`contentType = "application/x-www-form-urlencoded"`.在默认情况下，内容编码类型满足大多数情况。

contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。

3.1 后台代码

/**
    	 * 批量图片上传优化，一张一张上传
    	 * @param request
    	 */
    	@RequestMapping(value = { "/report/uploadInBatches" }, method = { org.springframework.web.bind.annotation.RequestMethod.POST })
    	@ResponseBody
    	public Map<String,Object> uploadInBatches(MultipartHttpServletRequest request) {
    		Map<String,Object> urlMap = new HashMap<>();
    		InputStream in = null;
    		try {
    			// 获取文件
    			MultipartFile file = request.getFile("imgFile");
    			// 获取文件全称
    			String originalFilename = file.getOriginalFilename();
    			logger.info("批量上传uploadInBatches接口调用，图片名称："+originalFilename+", "+file.getContentType()+", "+file.getSize());
    			// 获取文件类型
    			String imgType = originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
    			long startTime = System.currentTimeMillis();
    			// 图片保存服务器
    			in = new ByteArrayInputStream(file.getBytes());
    			String savePath = XXXService.storageMedia(in, imgType);// 这里写你上次接口
    			logger.info(originalFilename+" 图片上传成功：  "+", "+file.getContentType()+", "+file.getSize()+", "+
    					savePath+"=====上传图片耗时："+(System.currentTimeMillis()-startTime));
    		} catch (Exception e) {
    			e.printStackTrace();
    		}finally {
    			try {
    				in.close();
    			} catch (IOException e) {
    				e.printStackTrace();
    			}
    		}
    
    		return urlMap;
    	}

也是批量上传，只不过是循环传到后台保存。

[Nginx]: http://www.baidu.com/link?url=hAk2WptIj9FhdEz-aZ9wJi2vaiJ0EtOb7hgUxmLYfkrPGi3ja-xLZGrpSrR6TnVyjf32ByF0EN2jYFiPmqA-xK