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

2018-06-15 admin

背景

  • OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。使用阿里云oss做文件存储的时候,不可避免的涉及到文件的上传,大概分为两种方式:

服务端验证上传

  • 先将文件传递到应用服务器,再由应用服务器上传至oss服务器,这种方式的优点是简单易懂,nodejs只需要按照文档使用ali-oss中间件上传就行,本文重点不放在这种方式,如果有需要可以私信我。这种方式的缺点是,文件要先上传到应用服务器,再上传到oss,占用带宽资源,过程虽然简单易于操作但是比较繁琐。

服务端签名前端直传

  • 这种方式是我比较推荐使用的,但是需要自己对移动端进行签名,官方的例子给出了一个php版本的签名服务文件,同时上传使用的是plupload这个功能强大,但是不支持模块化使用的插件,于是经过一番琢磨,将php版本的签名服务改成了js版本,同时提供axios版本的文件上传供大家参考,亲测可行。

服务代码:


const crypto =require('crypto')
async getSingature(ctx){
        ctx.status=200;
        const _config={...}//里面存放阿里云oss的配置参数,不详细说明,用的都应该懂
        const OSSAccessKeyID=_config['spring.aliyun.oss.access-key-id']
        const OSSAccessKeySecret=_config['spring.aliyun.oss.access-key-secret']
        const OSSEndPoint=_config['spring.aliyun.oss.end-point']
        const OSSBucketName=_config['spring.aliyun.oss.bucket-name'];
        let now=new Date();
        const expire=300;
        //签名有效时间五分钟,可自行设定
        const end = now.getTime()/1000 + expire;
        //过期时间
        let expiration=new Date((now.getTime()/1000+expire)*1000);
        //oss服务器时间格式iso
        expiration=expiration.toISOString();
        //上传目录
        const dir= ''
        //上传的限制规则
        const condition=['content-length-range',0,1048576000]
        const start=['start-with','key',dir];
        const conditions=[condition]
        const arr={
            expiration,
            conditions
        }
        //上传策略(规则对象转json字符串)
        const policy=JSON.stringify(arr);
        //进行base64编码
        const base64_policy= (new Buffer(policy)).toString('base64');

        const string_to_sign=base64_policy;
        //使用crypto签名
        const signature=crypto.createHmac('sha1',     OSSAccessKeySecret).update(string_to_sign).digest().toString('base64');
        const host="http://"+OSSBucketName+'.'+OSSEndPoint.split('//')[1];
        const accessid=OSSAccessKeyID;
        //返回结果给前端
        return {
            accessid,
            signature,
            policy:base64_policy,
            expire:end,
            dir,
            host
        }
    }

前端上传: 注意:oss一次只能上传一个文件(只有一个key),可以循环执行post,key为上传到oss后的文件名。signatureObj这里是上面nodejs服务端返回的签名对象

    var file=ducument.getElementById('file').files[0] 
    var formData = new FormData();
    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' }
})

原文链接:https://segmentfault.com/a/1190000015294527

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34084.html

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

相关文章
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: <form id="form" method="post" action="http:&#x2...
2017-03-06
JavaScript对象反射
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。 在JavaScript中没有完...
2015-11-12
从 JavaScript 到 TypeScript - 声明类型
从 JavaScript 语法改写为 TypeScript 语法,有两个关键点,一点是类成员变量 (Field) 需要声明,另一点是要为各种东西 (变量、参数、函数 / 方法等) 声明类型。而这两个点直接引出了两个关键性的问题,有哪些类型?...
2017-06-05
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
游戏机遇到来 非主流HTML5能否成器?
2014年第四季度以来,有60%的游戏行业从业者已经投入或准备投入开发HTML5为基础的游戏,并对其前景表示乐观的态度。   对HTML 5这项诞生于2008年的标准来说,其正在经历最好的时代。 游戏机遇到来 非主流HTML5能否成器?  ...
2015-11-12
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
回到顶部