1. 程式人生 > >阿里雲oss springMVC+ajax後臺和前端上傳檔案

阿里雲oss springMVC+ajax後臺和前端上傳檔案

oss上傳檔案

後臺上傳

前端ajax程式碼,傳入一個input物件

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("上傳圖片出錯");
		}
	});
	
}
後臺spring程式碼
  @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);
      });
}