阿里OSS ajax方式 web直传

3 篇文章 0 订阅
2 篇文章 0 订阅

send_request = function(){//这是从后台获取认证策略等信息。
  var htmlobj=$.ajax({url:root+"/service/policyInfoController/policy",async:false});
  return htmlobj.responseText;
};

function get_signature()//读取获得的参数
{
//可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲
  now = timestamp = Date.parse(new Date()) / 1000; 
  if (expire < now + 3)
  {
    body = send_request();
    console.log(body);
    var obj = eval ("(" + body + ")");
    host = obj['host']
    policyBase64 = obj['policy']
    accessid = obj['accessid']
    signature = obj['signature']
    expire = parseInt(obj['expire'])
    callbackbody = obj['callback'] 
    key = obj['dir']
    return true;
  }
  return false;
};

//组装发送数据
var request = new FormData(); 
request.append("OSSAccessKeyId",accessid);//Bucket 拥有者的Access Key Id。
request.append("policy",policyBase64);//policy规定了请求的表单域的合法性
request.append("Signature",signature);//根据Access Key Secret和policy计算的签名信息,OSS验证该签名信息从而验证该Post请求的合法性
//---以上都是阿里的认证策略 
request.append("key",g_object_name);//文件名字,可设置路径
request.append("success_action_status",'200');// 让服务端返回200,不然,默认会返回204
request.append('file', file);//需要上传的文件 file  

request.append("callback",callbackbody);//回调,非必选,可以在policy中自定义

$.ajax({  
        url : host,  //上传阿里地址
        data : request,
        processData: false,//默认true,设置为 false,不需要进行序列化处理
        cache: false,//设置为false将不会从浏览器缓存中加载请求信息
        async: false,//发送同步请求
        contentType: false,//避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
        dataType: 'JSONP',//不涉及跨域  写json即可
      type : 'post',
      success : function(callbackHost, request) { //callbackHost:success,request中就是 回调的一些信息,包括状态码什么的 
        var name=$this.attr("name");
        $this.closest("li").append("<span class='img-span'><img src="+host+"/"+get_uploaded_object_name(file.name)+">");//动态向页面添加上传图片
    },  
    error : function(returndata) {  
        alert("上传图片出错",false);  
    }  
});

阿里云OSS视频直传是一种将视频文件直接上传到阿里云OSS的方法。根据提供的引用内容,有两个主要步骤可以帮助您实现阿里云OSS视频直传。 第一步是创建签名。根据引用中提供的链接,可以找到阿里云官方文档中关于JavaScript客户端签名直传的详细说明。这个方法适用于通过JavaScript直接与阿里云服务器进行交互。您可以按照文档中的指导,使用JavaScript生成签名并将其与视频文件一起发送到阿里云OSS。 第二步是在Vue页面中使用视频直传功能。根据引用中提供的代码片段,您可以在Vue页面中使用el-upload组件来实现视频的上传功能。通过设置合适的属性和事件处理程序,您可以将视频文件直接上传到阿里云OSS,并获取上传后的视频URL。 请注意,以上仅是提供了一种实现阿里云OSS视频直传的方法。根据您的具体需求和情况,可能还需要进行其他设置和逻辑处理。如果您遇到任何问题或需要更多帮助,请参考阿里云官方文档或咨询阿里云技术支持。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue element-ui的直传视频到阿里云oss(亲测有效)](https://blog.csdn.net/qq_38997036/article/details/107591742)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [阿里云oss视频上传及预览图汇总](https://blog.csdn.net/weixin_43816501/article/details/122264881)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值