使用axios上传文件到阿里云对象文件存储服务器oss
背景
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' }
})
使用axios上传文件到阿里云对象文件存储服务器oss的更多相关文章
- Docker-生成镜像、服务搭建(redis集群、kibana、运行项目jar包)、上传镜像至阿里云
目录 生成自己的镜像 1.下载官方tomcat镜像 2.运行镜像后将webapp目录里新增文件(官方镜像是没有页面的 具体操作见) 3.使用docker ps -a 查看刚刚修改后的容器id 4.执行 ...
- 【UEditor】 UEditor整合项目上传资源到阿里云服务器
目录 关于此文 下载源码 JSP代码 Java代码 阿里云jar包引入配置 成功啦! 回到顶部 关于此文 项目中要实现编辑器生成带格式的html文档,存入模板,最后生成html的URL,所以选择了UE ...
- 如何把base64格式的图片上传到到阿里云oss c#版
今天碰到需要把canvas上的的图片转存到阿里云oss,于是百度了半天,一个能打的答案都没有.怒了,自己搞起. 代码超级简单,需要先引入nuget 中啊里云的oss api 1 byte[] arr ...
- 阿里云对象存储 OSS 应用服务器搭建代码
背景说明 最近做一个APP客户端图片直传阿里云OSS的服务,需要在后台开一个阿里云的OSSToken获取的接口. 阿里云官方文档地址:快速搭建移动应用直传服务. 略过移动端说明,直接看服务端的. 不是 ...
- 阿里云对象存储服务,OSS使用经验总结,图片存储,分页查询
阿里云OSS-使用经验总结,存储,账号-权限,分页,缩略图,账号切换 最近项目中,需要使用云存储,最后选择了阿里云-对象存储服务OSS.总的来说,比较简单,但是仍然遇到了几个问题,需要总结下. 1.O ...
- angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)
2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...
- OSS上传文件到阿里云
最近做项目,需要上传文件,因为上传到项目路径下,感觉有时候也挺不方便的,就试了一下上传文件到阿里云oss上去了, oss的使用网上有很多介绍,都是去配置一下需要的数据,然后直接调用他的api就可以了. ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- Delphi阿里云对象存储OSS【支持上传文件、下载文件、删除文件、创建目录、删除目录、Bucket操作等】
作者QQ:(648437169) 点击下载➨Delphi阿里云对象存储OSS 阿里云api文档 [Delphi阿里云对象存储OSS]支持 获取Bucket列表.设置Bucket ...
随机推荐
- [USACO17JAN]Balanced Photo平衡的照片 (树状数组)
题目链接 Solution 先离散化,然后开一个大小为 \(100000\) 的树状数组记录前面出现过的数. 然后查询 \((h[i],n]\) 即可. 还要前后各做一遍. Code #include ...
- Jesus Is Here
Jesus Is Here Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/102400 K (Java/Others)To ...
- java 将MySql数据库中的数据(某一列)取出放入数组中 转
转:http://blog.csdn.net/ewili/article/details/8605638 假设mysql中test数据库中有个表式score,有数据,我只取第一列的数据出来: publ ...
- vue中的导航钩子
//钩子 登录拦截 router.beforeEach((to, from, next) => { const sessionToken = window.sessionStorage.getI ...
- 使用python执行sql语句和外键解析
一.下载并导入pymysql pip install pymysql && import pymysql db=pymysql.connect(host=) #如果报错host大概率因 ...
- mariadb(三)查
-查询基本使用(条件,排序,聚合函数,分组,分页) 1)创建一个表结构然后添加数据 create table baba (id int unsigned not null auto_increment ...
- tp框架 MVC模式
一.定义 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方 ...
- 浮点数float累加误差解决方式总结
首先是float累加产生误差的原因,该部分转自:http://blog.csdn.net/zhrh0096/article/details/38589067 1. 浮点数IEEE 754表示方法 要 ...
- 身份证验证的js
function isIdCardNo(num) { num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能 ...
- php编程怎么和mysql连接
php连接mysql的方法: MySQLi - 面向对象 MySQLi - 面向过程 关闭连接 连接在脚本执行完后会自动关闭.你也可以使用以下代码来关闭连接: (MySQLi - 面向对象 MySQL ...