当前位置: 首页 > Web前端 > HTML

使用axios上传文件到阿里云对象文件存储服务器oss

时间:2023-04-02 22:33:50 HTML

后台OSS可用于存储图片、音视频、日志等海量文件。各种终端设备、网站程序、移动应用程序都可以直接向OSS写入或读取数据。OSS支持流写入和文件写入。在使用阿里云oss做文件存储的时候,难免会涉及到上传文件,大致可以分为两种方式:服务器先校验上传文件到应用服务器,应用服务器再上传到oss服务器.优点是简单易懂。Nodejs只需要根据文档使用ali-oss中间件上传即可。本文不重点介绍这种方法。有需要的可以私信我。这种方式的缺点是文件需要先上传到应用服务器,再上传到oss,占用带宽资源。虽然过程简单易操作,但繁琐。我推荐使用服务端签名前端直传的方式,但是需要自己在移动端进行签名。官方的例子给出了php版本的签名服务文件,上传使用的是plupload,功能强大,但是不支持模块化插件,所以想了想把php版本的签名服务改成了js版本,并提供了axios版本的文件上传供大家参考,亲测可行。服务代码:constcrypto=require('crypto')asyncgetSingature(ctx){ctx.status=200;const_config={...}//阿里云oss的配置参数存放在里面,不做详细描述,都是用到的你应该明白constOSSAccessKeyID=_config['spring.aliyun.oss.access-key-id']constOSSAccessKeySecret=_config['spring.aliyun.oss.access-key-secret']constOSSEndPoint=_config['spring.aliyun.oss.end-point']constOSSBucketName=_config['spring.aliyun.oss.bucket-name'];让现在=新日期();常量到期=300;//签名有效期为五分钟,可自行设置constend=now.getTime()/1000+expire;//过期时间letexpiration=newDate((now.getTime()/1000+expire)*1000);//oss服务器时间格式isoexpiration=expiration.toISOString();//上传目录constdir=''//上传限制规则constcondition=['content-length-range',0,1048576000]conststart=['start-with','key',dir];constconditions=[condition]constarr={到期,条件}//上传策略(规则对象到json字符串)constpolicy=JSON.stringify(arr);//编码base64constbase64_policy=(newBuffer(policy)).toString('base64');conststring_to_sign=base64_policy;//使用加密签名constsignature=crypto.createHmac('sha1',OSSAccessKeySecret).update(string_to_sign).digest().toString('base64');consthost="http://"+OSSBucketName+'.'+OSSEndPoint.split('//')[1];constaccessid=OSSAccessKeyID;//返回结果给前端return{accessid,signature,policy:base64_policy,expire:end,dir,host}}前端上传:注意:oss一次只能上传一个文件(只有一个key),而且post可以循环执行,关键是上传到oss后的文件名signatureObj为上述nodejs服务器返回的签名对象varfile=ducument.getElementById('file').files[0]varformData=newFormData();formData.append('key','上传文件名');formData.append('name',file.name)formData.append('policy',signatureObj.policy)formData.append('OSSAccessKeyId',signatureObj.accessid)formData.append('success_action_status','200')formData.append('callback','')formData.append('signature',signatureObj.signature)formData.append('file',file.file)axios({url:url,method:'post',data:formdata,headers:{'Content-Type':'multipart/form-data'}})