先说一下遇到的问题，
1.刚开始在开发阶段直接前台用ajax调接口上传图片没问题，可是到了正式服务器部署时，问题出现了。好像是无法跨域（可能是服务器域名化了的原因），但是后台接口方法中已经添加了允许跨域请求的代码：
//跨域请求 response.setHeader("Access-Control-Allow-Origin", "*");2.于是，调整方案，前台 ajax 上传文件提交到后台，在后台调用接口来完成文件上传，代码写完测试时又发现问题了，大一点的图片传到后台时接收不到，部分android手机上传的图片后台也接收不到。
最终的解决方案：
前台使用fetch发起请求，并且将图片转换成 base64字符串再提交到后台，后台解析成图片调用接口完成图片上传。
注意：部分Android手机出现点击图片上传按钮无响应的情况，经排查是下面这段代码的问题。
<input class="weui_uploader_input" name="file" type="file" id="up_file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple />部分Android手机不支持 H5的multiple 属性，去掉即可（去掉之后在选取图片时一次只能选择一张）
前端使用 weui 来选取图片。
<div class="weui_uploader z_photo1"> <div class="weui_uploader_bd"> <ul class="weui_uploader_files" id="img2x"> </ul> <div class="weui_uploader_input_wrp"> <input class="weui_uploader_input" name="file" type="file" id="up_file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple /> </div> </div> </div>js部分，通过fetch将选取到的图片发给后台处理
$(function() { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; // 1024KB*10)，也就是 10MB var maxSize = 1024 * 10 * 1024; // 图片最大宽度 var maxWidth = 9000; // 最大上传图片数量 var maxCount = 6; $('#up_file').on('change', function(event) { var files = event.target.files; //console.log(files); //console.log("--files.length--",files.length); // 如果没有选中文件，直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; i++) { var file = files[i]; var reader = new FileReader(); // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { $.weui.alert({ text: '该类型不允许上传' }); continue; } if (file.size > maxSize) { $.weui.alert({ text: '图片太大，不允许上传' }); continue; } if ($('.weui_uploader_file').length >= maxCount) { $.weui.alert({ text: '最多只能上传' + maxCount + '张图片' }); return; } //console.log(file.name); var _canvas; reader.onload = function(e) { //console.log('--render.onload-'); var img = new Image(); img.onload = function() { //console.log('--img.onload-'); // 不要超出最大宽度 var w = Math.min(maxWidth, img.width); // 高度按比例计算 var h = img.height * (w / img.width); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var base64 = canvas.toDataURL('image/png'); // 插入到预览区 var progress = 0; function uploading() { } }; var formData = new FormData(); formData.append('file', e.target.result); formData.append('busId', "${pkId}"); formData.append('fileName', file.name); fetch("${ctx}/wechat/eventReport/uploadFile", { method: 'POST', headers: { }, body: formData, }).then((response) = >response.json()).then((responseData) = >{ //console.log(responseData); if (responseData.success) { var imgNames = responseData.data; //这里是将图片上传之后，后台返回的图片的存放路径存到了imgArr数据组// 中，方便前台页面上回显上传的图片。 for (var i = 0; i < imgNames.length; i++) { var image = imgNames[i]; if (image) { imgArr.push(image); } } //这个就是让图片回显在页面上的函数，每个人的处理方式都不一样，就不贴出来了。 refreshImg(); } else { layer.msg('上传失败！', { time: 2000 }); } }). catch((error) = >{ console.error('error', error); layer.msg('上传失败！', { time: 2000 }); }); }; reader.readAsDataURL(file); } }); })先将base64字符串转为图片。这里使用 restTemplate来请求接口，所以需要将图片文件先转为 FileSystemResource类型，
只能先生成一个 FileSystemResource 类型的文件，上传成功之后在删除即可。
@RequestMapping(value = "/uploadFile",method = RequestMethod.POST) @ResponseBody public Map<String,Object> uploadV(HttpServletRequest request,HttpServletResponse response,String file,String fileName,String busId) { Map<String,Object> map = new HashMap<String,Object>(); List<String> resList = new ArrayList<String>(); try{ //file = file.substring("data:image/png;base64,".length(),file.length()); file = file.substring(file.indexOf("base64,")+7,file.length()); String tempFileName = UUID.randomUUID().toString().replaceAll("-", "")+fileName.substring(fileName.lastIndexOf(".")); //在项目的webapp文件夹下新建一个tempFile文件夹，用来存放生成的临时文件 String tempFilePath = request.getSession().getServletContext().getRealPath("/") +"tempFile/" + tempFileName; Base64Utils.Base64ToImage(file, tempFilePath); FileSystemResource resource = new FileSystemResource(tempFilePath); MultiValueMap<String, Object> param = new LinkedMultiValueMap<>(); param.add("file", resource); param.add("busId", busId); //Constants.fileUploadUrl 是上传图片的接口的url String string = restTemplate.postForObject(Constants.fileUploadUrl, param, String.class); //System.out.println(string); new File(tempFilePath).delete(); JSONObject json = JSONObject.fromObject(string); if(json.getBoolean("success")){ resList.add(json.getString("data")); } map.put("data", resList); map.put("success", true); } catch(Exception e){ map.put("success", false); e.printStackTrace(); } return map; }将base64字符串转为图片的工具类：
package *****; import java.io.FileOutputStream; import java.io.OutputStream; import org.hibernate.internal.util.StringHelper; import Decoder.BASE64Decoder; public class Base64Utils { /** * base64字符串转换成图片 * @param imgStr base64字符串 * @param imgFilePath 图片存放路径 * @return * * @author ZHANGJL * @dateTime 2018-02-23 14:42:17 */ public static boolean Base64ToImage(String imgStr,String imgFilePath) { // 对字节数组字符串进行Base64解码并生成图片 if (StringHelper.isEmpty(imgStr)) // 图像数据为空 return false; BASE64Decoder decoder = new BASE64Decoder(); try { // Base64解码 byte[] b = decoder.decodeBuffer(imgStr); for (int i = 0; i < b.length; ++i) { if (b[i] < 0) {// 调整异常数据 b[i] += 256; } } OutputStream out = new FileOutputStream(imgFilePath); out.write(b); out.flush(); out.close(); return true; } catch (Exception e) { return false; } } }上传文件接口，这里 List<MultipartFile> files 中就是接收到的文件了，请自行处理，代码省略了。
@RequestMapping(value = "/hzz/uploadv", method = RequestMethod.POST) @ResponseBody public Object handleFileUploadV(HttpServletRequest request, HttpServletResponse response) { //跨域请求 response.addHeader("Access-Control-Allow-Origin", "*");//http://localhost:8086 List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file"); }
