阿里oss 实现文件上传(前端代码)

1.本人项目使用jquery写的,而阿里云oss代码是原生js所以有些地方会两者共用。
2.这里只展示前端的代码部分,整个流程是由后台生成签名–>前端点击上传文件的时候获取到后台返回的accessid、host、policy、signaturecom等参数–>请求成功并获取到返回参数后前端将这些参数重新赋值(祥见代码),赋值成功后oss的puload组件会自动提交到后台返回的host参数内的链接地址。–>此时文件提交就成功了
3.本次项目使用的是阿里云oss的服务端签名直传并设置回调。
在这里插入图片描述
4.下载客户端源码
在这里插入图片描述
5.因为本人项目用的jquery所以就直接在项目中引用了源码,如果是vue或者其他框架的话也可以npm进行安装plupload,我这里是直接script标签引入文件包
在这里插入图片描述
在这里插入图片描述

6.接下来就是在源码内根据需求进行更改开发

accessid = ''
accesskey = ''
host = ''
policyBase64 = ''
signature = ''
filename = ''
key = ''
expire = new Date().getTime() + 1000 * 60 * 30//设置签名过期时间,如果是后台设置该参数,则前端可以忽略不设置。
g_object_name = ''
g_object_name_type = ''
now = timestamp = Date.parse(new Date()) / 1000;


function send_request(opt) {//ajax封装,源码内使用的是原生xmlhttp进行的请求,为了项目方便进行了重新封装。
  opt = opt || {};
  opt.method = (opt.method || 'GET').toUpperCase();
  opt.url = opt.url || '';
  opt.async = opt.async || true;
  opt.data = opt.data || null;
  opt.success = opt.success || function () {
  };
  var xmlHttp = null;
  if (XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
  else {
    xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
  }
  var params = [];
  for (var key in opt.data) {
    params.push(key + '=' + opt.data[key]);
  }
  var postData = params.join('&');
  if (opt.method.toUpperCase() === 'POST') {
    xmlHttp.open(opt.method, op
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值