因为一个项目要做一个头像上传的功能，因此选择了使用jquery的头像插件cropper，cropper是一款使用简单且功能强大的图片剪裁jQuery插件，但是在使用的时候，有一个很大的坑需要注意，那就是当上传的文件不需要转换成base64传输给后台的时候，使用FormData对象异步上传的时候，需要加上两个参数为false，此外还给除了两种上传头像的方式，一种直接上传到文件服务器，类似<input type="file" name="file"> 还有一种是将图片进行base64，在后台解密转换成图片。
contentType: false,
processData: false,
1.不进行base64转换直接上传后台
页面显示
<div class="up-img-cover" id="up-img-touch" >
修改头像
此外附上代码（这里直接给出custom_up_img.js）的前端代码:
$(document).ready(function(){ $("#up-img-touch").click(function(){ $("#doc-modal-1").modal({width:'600px'}); }); }); $(function() { 'use strict'; // 初始化 var $image = $('#image'); $image.cropper({ aspectRatio: '1', autoCropArea:0.8, preview: '.up-pre-after', }); // 事件代理绑定事件 $('.docs-buttons').on('click', '[data-method]', function() { var $this = $(this); var data = $this.data(); var result = $image.cropper(data.method, data.option, data.secondOption); switch (data.method) { case 'getCroppedCanvas': if (result) { // 显示 Modal $('#cropped-modal').modal().find('.am-modal-bd').html(result); $('#download').attr('href', result.toDataURL('image/jpeg')); } break; } }); // 上传图片 var $inputImage = $('#inputImage'); var URL = window.URL || window.webkitURL; var blobURL; if (URL) { $inputImage.change(function () { var files = this.files; var file; if (files && files.length) { file = files[0]; if (/^image\/\w+$/.test(file.type)) { blobURL = URL.createObjectURL(file); $image.one('built.cropper', function () { // Revoke when load complete URL.revokeObjectURL(blobURL); }).cropper('reset').cropper('replace', blobURL); $inputImage.val(''); } else { window.alert('请选择图片！！！'); } } // Amazi UI 上传文件显示代码 var fileNames = ''; $.each(this.files, function() { fileNames += '' + this.name + ' '; }); $('#file-list').html(fileNames); }); } else { $inputImage.prop('disabled', true).parent().addClass('disabled'); } //绑定上传事件 $('#up-btn-ok').on('click',function(){ var $modal = $('#my-modal-loading'); var $modal_alert = $('#my-alert'); var img_src=$image.attr("src"); if(img_src==""){ set_alert_info("没有选择上传的图片"); $modal_alert.modal(); return false; } $modal.modal(); $("#image").cropper('getCroppedCanvas').toBlob(function(blob){ var formData = new FormData(); //这里创建FormData()对象 formData.append('file', blob); //给表单对象中添加一个name为file的文件 blod是这个插件选择文件后返回的文件对象 console.log(blob); $.ajax({ url:"http://localhost:8081/file/upload", //这里我上传的是我自己开源的一个文件服务器 github地址:https://github.com/Admin1024Admin/FileServer.git type: "POST", data: formData, contentType: false, //这里需要注意 processData: false, success: function(data, textStatus){ $modal.modal('close'); set_alert_info(data.result); $modal_alert.modal(); if(data.result=="ok"){ $("#up-img-touch img").attr("src",data.file); var img_name=data.file.split('/')[2]; console.log(img_name); alert("ok"); //异步更新头像地址 $.ajax({ url:"/space/"+url+"/updataAvatar", type:"post", data:{"imgUrl":data.file}, success:function (data) { if(data=="ok"){ window.location.reload(); } }, error:function () { alert("更新失败"); } }) window.location.reload(); } }, error: function(){ $modal.modal('close'); set_alert_info("上传头像失败了！"); $modal_alert.modal(); //console.log('Upload error'); } }); }) }); }); function rotateimgright() { $("#image").cropper('rotate', 90); } function rotateimgleft() { $("#image").cropper('rotate', -90); } function set_alert_info(content){ $("#alert_content").html(content); } 后台代码:基于springboot /** * 博客头像上传 * @param file * @return */ @PostMapping("/file/upload") @ResponseBody public Map handleFileUpload(@RequestParam("file") MultipartFile file) { File returnFile = null; Map map = new HashMap (); try { File f = new File(file.getOriginalFilename(), file.getContentType(), file.getSize(),file.getBytes()); //需要注意，这里的File对象是我自定义的模型类。并非java.io.File对象 f.setMd5( MD5Util.getMD5(file.getInputStream()) ); returnFile = fileService.saveFile(f); returnFile.setPath("http://localhost:8080/file/view/"+f.getId()); returnFile.setContent(null) ; map.put("result","ok"); map.put("file","http://localhost:8081/file/view/"+f.getId()); return map; } catch (IOException | NoSuchAlgorithmException ex) { ex.printStackTrace(); map.put("result","no"); map.put("message",ex.getMessage()); return map; } } 2.转换成base64后传给后台，在后台解码保存图片
前端代码:
$(document).ready(function(){ $("#up-img-touch").click(function(){ $("#doc-modal-1").modal({width:'600px'}); }); }); $(function() { 'use strict'; // 初始化 var $image = $('#image'); $image.cropper({ aspectRatio: '1', autoCropArea:0.8, preview: '.up-pre-after', }); // 事件代理绑定事件 $('.docs-buttons').on('click', '[data-method]', function() { var $this = $(this); var data = $this.data(); var result = $image.cropper(data.method, data.option, data.secondOption); switch (data.method) { case 'getCroppedCanvas': if (result) { // 显示 Modal $('#cropped-modal').modal().find('.am-modal-bd').html(result); $('#download').attr('href', result.toDataURL('image/jpeg')); } break; } }); // 上传图片 var $inputImage = $('#inputImage'); var URL = window.URL || window.webkitURL; var blobURL; if (URL) { $inputImage.change(function () { var files = this.files; var file; if (files && files.length) { file = files[0]; if (/^image\/\w+$/.test(file.type)) { blobURL = URL.createObjectURL(file); $image.one('built.cropper', function () { // Revoke when load complete URL.revokeObjectURL(blobURL); }).cropper('reset').cropper('replace', blobURL); $inputImage.val(''); } else { window.alert('请选择图片！！！'); } } // Amazi UI 上传文件显示代码 var fileNames = ''; $.each(this.files, function() { fileNames += '' + this.name + ' '; }); $('#file-list').html(fileNames); }); } else { $inputImage.prop('disabled', true).parent().addClass('disabled'); } //绑定上传事件 $('#up-btn-ok').on('click',function(){ var $modal = $('#my-modal-loading'); var $modal_alert = $('#my-alert'); var img_src=$image.attr("src"); if(img_src==""){ set_alert_info("没有选择上传的图片"); $modal_alert.modal(); return false; } $modal.modal(); var url=$(this).attr("imgurl"); var canvas=$("#image").cropper('getCroppedCanvas'); //获取到图片转换成的canvas对象 var data=canvas.toDataURL(); //将图片转成base64 $.ajax({ url:"http://localhost:8081/file/upload", type: "POST", data: {"img":data.toString}, //这里传递参数给后台 success: function(data, textStatus){ $modal.modal('close'); set_alert_info(data.result); $modal_alert.modal(); if(data.result=="ok"){ $("#up-img-touch img").attr("src",data.file); var img_name=data.file.split('/')[2]; console.log(img_name); alert("ok"); window.location.reload(); } }, error: function(){ $modal.modal('close'); set_alert_info("上传头像失败了！"); $modal_alert.modal(); //console.log('Upload error'); } }); }); }); function rotateimgright() { $("#image").cropper('rotate', 90); } function rotateimgleft() { $("#image").cropper('rotate', -90); } function set_alert_info(content){ $("#alert_content").html(content); } 后台base64解码代码: /** * 头像上传 */ @PostMapping("/{username}/avatar") @ResponseBody public Map uploadAvatar(@RequestParam("image")String image){ String imgBase64 = image.replace("data:image/png;base64,",""); boolean b = GenerateImage(imgBase64); System.out.println("保存成功---->"+b); Map map = new HashMap (); map.put("result","ok"); map.put("file","图片路径"); return map; } //base64字符串转化成图片 public boolean GenerateImage(String imgStr){ //对字节数组字符串进行Base64解码并生成图片 if (imgStr == null) { //图像数据为空 return false; } try{ BASE64Decoder decoder = new BASE64Decoder(); // Base64解码 byte[] b = decoder.decodeBuffer(imgStr); for(int i=0;i