oss文件上传实现纯前端上传下载

oss文件上传实现纯前端上传

优点:不占用服务器资源,大幅度提升上传下载速度 话不多说!直接码上!

oss上传 *前端:*WebUploader上传组件 与后台交互获取oss上传相关秘钥并上传

$scope.uploader = uploader = WebUploader.create({
          
   
 // 自动上传。
 auto : true,
 // swf文件路径
 swf : webuploader/Uploader.swf,
 // 文件接收服务端。
  server : http://XXX.oss-cn-XXXX.aliyuncs.com,
 // 选择文件的按钮。可选。
 accept: {
          
   
  extensions: "pdf",
  mimeTypes: ".pdf"
 },
 // 内部根据当前运行是创建,可能是input元素,也可能是flash.
 pick : #picker,
 // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
 resize : false
});

uploader.on(uploadBeforeSend, function (file, data, headers) {
          
   
   $.ajax({
          
   
    type : "POST",
    url : __ctx + getA,
    timeout : 10000,
    dataType:"JSON",
    data:data,
    success : function(obj2) {
          
   
     data = $.extend(data,{
          
   
      key : obj2.dir,//这里最好在后台处理好
      policy: obj2.policy,
      OSSAccessKeyId: obj2.accessid,
      success_action_status : 200, //让服务端返回200,不然,默认会返回204
      //callback : obj2.callback,
      signature: obj2.signature,
     });
    error : function(XMLHttpRequest, textStatus, errorThrown) {
          
   
      $scope.$apply(function() {
          
   
      toastr.error("上传失败");
      uploader.removeFile(file, true);
     });
    },
    async : false
   });
   headers[Access-Control-Allow-Origin] = "*";
  });

后台:

public Map<String, String> getA() throws IOException {
          
   
String path= ""; // 
String accessId = ""; // 请填写您的AccessKeyId。
String accessKey = ""; // 请填写您的AccessKeySecret。
String endpoint = ""; // 请填写您的 endpoint。
String bucket = ""; // 请填写您的 bucketname 。
String host = "http://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
// callbackUrl为 上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。
String callbackUrl = "http://88.88.88.88.:8888";
String dir = ""; // 用户上传文件时指定的前缀。
OSSClient client = new OSSClient(endpoint, accessId, accessKey);
long expireTime = 30;
long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
Date expiration = new Date(expireEndTime);
PolicyConditions policyConds = new PolicyConditions();
policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

String postPolicy = client.generatePostPolicy(expiration, policyConds);
byte[] binaryData = postPolicy.getBytes("utf-8");
String encodedPolicy = BinaryUtil.toBase64String(binaryData);
String postSignature = client.calculatePostSignature(postPolicy);

Map<String, String> respMap = new LinkedHashMap<String, String>();
respMap.put("accessid", accessId);
respMap.put("policy", encodedPolicy);
respMap.put("signature", postSignature);
respMap.put("dir", path);
respMap.put("host", host);
respMap.put("expire", String.valueOf(expireEndTime / 1000));
return respMap;
}
经验分享 程序员 微信小程序 职场和发展