百度上傳組件：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;}

百度上傳組件：webuploader