百度上传组件：webuploader

百度图片上传组件：

页面：

<div class="upload">
<section>
<article>
<div class="wu-example">
<div id="fileList" class="uploader-list"></div>
      <span id="picker">上传出生证明</span>
</div>
       <div id="thumb"></div>
</article>
<div class="load" id="loading1" style="display: none"></div>
</section>


</div>

JS

坑1：路径

坑2：IOS和安卓不同，导致调用方式改变

$(document).ready(function(){ var serverUrl ;//默认值 var environment = "ceshi";//xiangshang,ceshi ,bendi var baseurl = '<%=basepath%>';//  alert(baseurl);var u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机//alert("安卓手机");if(environment=="xiangshang"){serverUrl = "/hd/6/updateHeadImgNew";//线上环境(hd是线上做了nginx路径映射)}else if(environment=="ceshi"){serverUrl = "/6/updateHeadImgNew";//测试环境}else if(environment=="bendi"){serverUrl = baseurl+"/6/updateHeadImgNew";//本地环境}} else if (u.indexOf('iPhone') > -1) {//苹果手机// alert("苹果手机");if(environment=="xiangshang"){serverUrl = "/hd/6/updateHeadImg";//线上环境(hd是线上做了nginx路径映射)}else if(environment=="ceshi"){serverUrl = "/6/updateHeadImg";//测试环境}else if(environment=="bendi"){serverUrl = baseurl+"/6/updateHeadImg";//本地环境}} else if (u.indexOf('Windows Phone') > -1) {//winphone手机//alert("winphone手机");if(environment=="xiangshang"){serverUrl = "/hd/6/updateHeadImg";//线上环境(hd是线上做了nginx路径映射)}else if(environment=="ceshi"){serverUrl = "/6/updateHeadImg";//测试环境}else if(environment=="bendi"){serverUrl = baseurl+"/6/updateHeadImg";//本地环境}}else{// alert("其他");if(environment=="xiangshang"){serverUrl = "/hd/6/updateHeadImg";//线上环境(hd是线上做了nginx路径映射)}else if(environment=="ceshi"){serverUrl = "/6/updateHeadImg";//测试环境}else if(environment=="bendi"){serverUrl = baseurl+"/6/updateHeadImg";//本地环境}}// alert(serverUrl);var uploader = WebUploader.create({    // swf文件路径    swf: 'webuploader/Uploader.swf',    auto: true,    // 文件接收服务端。    server: serverUrl,//本地测试地址    //     server: '/hd/6/updateHeadImgNew',//线上地址            fileVal :'image',        //缩略图    thumb:{        width: 100,        height: 100,        // 图片质量，只有type为`image/jpeg`的时候才有效。        quality: 70,        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.        allowMagnify: false,        // 是否允许裁剪。        crop: true,        // 为空的话则保留原有图片格式。        // 否则强制转换成指定的类型。        type: 'image/jpeg'    },            compress:{        width: 1000,        height: 1000,        // 图片质量，只有type为`image/jpeg`的时候才有效。        quality: 90,        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.        allowMagnify: false,        // 是否允许裁剪。        crop: false,        // 是否保留头部meta信息。        preserveHeaders: true,        // 如果发现压缩后文件大小比原来还大，则使用原来图片        // 此属性可能会影响图片自动纠正功能        noCompressIfLarger: false,        // 单位字节，如果图片大小小于此值，不会采用压缩。        compressSize: 0    },    // 选择文件的按钮。可选。    // 内部根据当前运行是创建，可能是input元素，也可能是flash.    pick: '#picker',    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！    resize: true,        //目前移动端有几个重要的 bug 在此列出来以免大家踩坑。    /*上传请求内容为空，这是 android 4 的一个bug，只要 file 的 blob数据修改过，通过 xhr2 去发送就有这个问题。 详情：https://code.google.com/p/android/issues/detail?id=39882解决方案： 发送的时候采用二进制方案，即 把 sendAsBinary 设置成true, 通过这种方式可以避免这个问题。后端接受需要小改动一下。*/        sendAsBinary:true,        fileNumLimit:1,    // 只允许选择图片文件。    accept: {        title: 'Images',        extensions: 'gif,jpg,jpeg,bmp,png',        mimeTypes: 'image/*'    }    });uploader.on( 'fileQueued', function( file ) {    uploader.makeThumb( file, function( error, ret ) {        if ( error ) {            $li.text('预览错误');        } else {        $("#picker").first("div").html("");        $("#thumb").html('<img alt="" src="' + ret + '" />');        $("#loading1").show();        }    });});uploader.on( 'uploadSuccess', function( file,result ) { $( '#'+file.id ).addClass('upload-state-done');var qiuniuurl1 = result.data.usIco;$("#pichidden_1").val(qiuniuurl1);$("#loading1").hide();});});

服务器程序：

IOS调用

@RequestMapping("/updateHeadImg")@ResponseBodypublic ApiResult updateHeadImg(String name) {ApiResult apiResult = new ApiResult();byte[] imageByte = null;try {InputStream inputStream = getRequest().getInputStream();imageByte = org.apache.commons.io.IOUtils.toByteArray(inputStream);} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}// 上传文件if (imageByte.length>0) {String filename = UUIDUtil.getUUID() + name;String key ="";if (upurl != null) {Date date = new Date();SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");String dateUrl = sdf.format(date);key = upurl + dateUrl + "/" + filename;}//byte[]  imageByte = this.cropBytes(image.getInputStream(), 420);System.out.println("key------------------------"+key);boolean flag = QiniuUtil.IVYBABY.uploadFile(key, imageByte);System.out.println("flag:----------------"+flag);System.out.println("上传七牛：" + flag);apiResult.getData().put("usIco",BASE_QN_URL+key+"?imageView2/1/w/420");} else {apiResult.setMsg("图片不能为空");}System.out.println(JSON.toJSONString(apiResult));return apiResult;}

安卓调用：

@RequestMapping("/updateHeadImgNew")@ResponseBodypublic ApiResult updateHeadImgNew() {ApiResult apiResult = new ApiResult();String imgUrl = "";InputStream inputStream = null;String bendiPic = "";try {inputStream = getRequest().getInputStream();//当前日期Date date = new Date();SimpleDateFormat sdf = new SimpleDateFormat("YYYYMMdd");String dateUrl = sdf.format(date);String path="/static/imgtest/"+dateUrl;//线上路径//String path="D://imgtest/"+dateUrl;//测试//创建文件夹File f = new File(path);if(!f.exists())f.mkdirs(); //上传图片到本地bendiPic = path+"/"+UUIDUtil.getUUID()+".png";//线上地址System.out.println("bendiPic:"+bendiPic);//裁切,并保存本地ImageUtil.crop(inputStream, 420, bendiPic);System.out.println("-----------本地保存路径：-----------"+bendiPic);//准备keyString filename = UUIDUtil.getUUID() + ".png";String key = upurl + dateUrl + "/" + filename;//上传七牛boolean flag = QiniuUtil.IVYBABY.uploadFile(key, bendiPic);//如果上传七牛失败，则返回本地路径if(flag){imgUrl = BASE_QN_URL+key+"?imageView2/1/w/420";}else{//这里做的文件映射,用域名映射上面的真是路径/static/imgtest/xxxxx.pngimgUrl = "static.ivybaby.me/imgtest/"+bendiPic;}apiResult.getData().put("usIco",imgUrl);} catch (Exception e) {// TODO Auto-generated catch blockapiResult.setMsg("图片不能为空");e.printStackTrace();}System.out.println("--------------imageUrl--------------【"+imgUrl+"】");return apiResult;}