使用七牛雲JS-SDK實現檔案上傳
阿新 • • 發佈：2019-02-02
1、新增js檔案
<script type="text/javascript" src="/resources/js/jquery/jquery-1.7.min.js"></script> <script type="text/javascript" src="/resources/js/qiniu/qiniu.min.js"></script> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" //獲取路徑 + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
2、所需jar包
<dependencies> <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>7.2.11</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp</artifactId> <version>3.3.1</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.6.2</version> <scope>compile</scope> </dependency> <dependency> <groupId>com.qiniu</groupId> <artifactId>happy-dns-java</artifactId> <version>0.1.4</version> <scope>compile</scope> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> </dependencies>
3、html程式碼
<input type="file" id="frontImg" name="myfiles" accept="image/*" onchange="ajaxFileUpload(this)">
<img src="#" alt="" id="img">
function ajaxFileUpload(obj) { var fileName = $(obj).val(); //上傳的本地檔案絕對路徑 var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length); //字尾名 var file = $(obj).get(0).files[0]; //上傳的檔案 var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size / (1024 * 1024)).toFixed(2) + 'MB' : (file.size / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B'; //檔案上傳大小 //七牛雲上傳 $.ajax({ type:'post', url: "<%=basePath%>QiniuUpToken", data:{"suffix":suffix}, dataType:'json', success: function(result){ if(result.success == 1){ var observer = { //設定上傳過程的監聽函式 next(result){ //上傳中(result引數帶有total欄位的 object，包含loaded、total、percent三個屬性) Math.floor(result.total.percent); //檢視進度[loaded:已上傳大小(位元組);total:本次上傳總大小;percent:當前上傳進度(0-100)] }, error(err){ //失敗後 alert(err.message); }, complete(res1){ //成功後 //****:填寫你的繫結域名或七牛雲提供的測試域名 //?imageView2/2/h/100：展示縮圖，不加顯示原圖 $("#img").attr("src","****/"+result.imgUrl+"?imageView2/2/h/100"); } }; var putExtra = { fname: "", //原檔名 params: {}, //用來放置自定義變數 mimeType: null //限制上傳檔案型別 }; var config = { region:qiniu.region.z0, //儲存區域(z0: 代表華東;不寫預設自動識別) concurrentRequestLimit:3 //分片上傳的併發請求量 }; var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config); observable.subscribe(observer) // 上傳開始 }else{ alertMsg(result.message); //獲取憑證失敗 } },error:function(){ //伺服器響應失敗處理函式 alertMsg("伺服器繁忙"); } }); }
5、後臺程式碼
/**
* 七牛雲上傳生成憑證
* @param request
* @param response
* @throws Exception
*/
@Controller
public class QiniuUpload {
@RequestMapping("QiniuUpToken")
public void QiniuUpToken(@RequestParam String suffix,HttpServletRequest request, HttpServletResponse response) throws Exception{
PrintWriter out = null;
Map<String,Object> result = new HashMap<String,Object>();
try {
String accessKey = "****"; //訪問祕鑰
String secretKey = "****"; //授權祕鑰
String bucket = "****"; //儲存空間名稱
Auth auth = Auth.create(accessKey, secretKey); //驗證七牛雲身份是否通過
out = response.getWriter();
//生成憑證
String upToken = auth.uploadToken(bucket);
result.put("token", upToken);
// 是否可以上傳的圖片格式
/*boolean flag = false;
String [] imgTypes= new String[]{"jpg","jpeg","bmp","gif","png"};
for(String fileSuffix :imgTypes) {
if(suffix.substring(suffix.lastIndexOf(".") + 1).equalsIgnoreCase(fileSuffix)) {
flag = true;
break;
}
}
if(!flag) {
throw new Exception("圖片：" + suffix + " 上傳格式不對！");
}*/
//生成實際路徑名
String randomFileName=UUID.randomUUID().toString() +suffix;
result.put("imgUrl", randomFileName);
result.put("success", 1);
out.write(JsonUtil.objectToJson(result));
} catch (Exception e) {
result.put("success", 0);
result.put("message", "獲取憑證失敗，"+e.getMessage());
out.write(JsonUtil.objectToJson(result));
}
}
}