百度上傳元件：webuploader
阿新 • • 發佈：2019-01-30
百度圖片上傳元件：
頁面：
<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") @ResponseBody public 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 block e.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")
@ResponseBody
public 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);
//準備key
String 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.png
imgUrl = "static.ivybaby.me/imgtest/"+bendiPic;
}
apiResult.getData().put("usIco",imgUrl);
} catch (Exception e) {
// TODO Auto-generated catch block
apiResult.setMsg("圖片不能為空");
e.printStackTrace();
}
System.out.println("--------------imageUrl--------------【"+imgUrl+"】");
return apiResult;
}