阿里雲oss springMVC+ajax後臺和前端上傳檔案
阿新 • • 發佈:2019-01-01
oss上傳檔案
後臺上傳
前端ajax程式碼,傳入一個input物件
後臺spring程式碼function uploadFileOss(input, callback) { var form = $("<form></form>"); form.append($(input)); var formData = new FormData(form[0]); $.ajax({ url : "ajax/aili/uploadFile", type : 'POST', data : formData, async : false, cache : false, contentType : false, processData : false, success : function(returndata) { if (callback) { callback(returndata); } }, error : function(returndata) { alert("上傳圖片出錯"); } }); }
@RequestMapping(value = {"/uploadFile"}, method = RequestMethod.POST, produces = {"text/javascript;charset=UTF-8"}) @ResponseBody public String uploadFile(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException, IOException { // 建立一個通用的多部分解析器 CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); // 判斷 request 是否有檔案上傳,即多部分請求 if (multipartResolver.isMultipart(request)) { // 轉換成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request; // 取得request中的所有檔名 Iterator<String> iter = multiRequest.getFileNames(); //此處只上傳單個檔案,如果需要多個檔案只需要改為while迴圈上傳 if (iter.hasNext()) { // 記錄上傳過程起始時的時間,用來計算上傳時間 int pre = (int)System.currentTimeMillis(); // 取得上傳檔案 MultipartFile file = multiRequest.getFile(iter.next()); if (file != null) { // 取得當前上傳檔案的檔名稱 String myFileName = file.getOriginalFilename(); // 如果名稱不為“”,說明該檔案存在,否則說明該檔案不存在 if (StringUtils.isNotEmpty(myFileName.trim())) { String endpoint = "http://oss-cn-shanghai.aliyuncs.com"; // accessKey請登入https://ak-console.aliyun.com/#/檢視 String accessKeyId = "*******"; String accessKeySecret = "*******"; // 建立OSSClient例項 OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret); ossClient.putObject("oss物件儲存的空間名稱", file.getOriginalFilename(), file.getInputStream()); // 使用訪問OSS // 關閉ossClient ossClient.shutdown(); } } // 記錄上傳該檔案後的時間 int finaltime = (int)System.currentTimeMillis(); logger.info("上傳花費時間:" + (finaltime - pre)); } } return "success"; }
前端直傳
function uploadFile(input, callback) { var client = new OSS.Wrapper({ region: 'oss-cn-shanghai', accessKeyId: '*******', accessKeySecret: '*******', bucket: '*******' }); var file = input.files[0]; var storeAs = $(input).val(); console.log(file.name + ' => ' + storeAs); client.multipartUpload(storeAs, file).then(function (result) { console.log(result); }); }