使用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 ...
随机推荐
- discuz x3.2设置注册邮件激活_企业邮箱发送邮件失败
在discuz x2.5邮箱设置里面已经说了很多关于邮件设置和常见问题的处理办法了,今天这里主要是说明下Discuz! 邮件发送失败排查思路,适用于任何板块的Discuz程序. Discuz! 邮件发 ...
- Hadoop HDFS本地存储目录结构解析
转自:https://blog.csdn.net/superman_xxx/article/details/51689398 HDFS metadata以树状结构存储整个HDFS上的文件和目录,以及相 ...
- (appium+python)UI自动化_03_元素定位工具
前言 在UI自动化过程中,需要对手机app上的元素进行定位,然后进一步编写自动化脚本操作app.定位元素首先需要定位工具来辅助查看页面元素.小编常用的定位工具有2种,分别是uiautomatorvie ...
- 20190823 尚硅谷MySQL核心技术
背景 视频时间:2017.09 MySQL版本:5.5 MySQL基础 命令行启动.停止MySQL: net start MySQL(这里是注册的服务名称) net stop MySQL 命令行连接M ...
- Eclipse+Pydev环境下出现error “eclipse Non-UTF-8 code”
文件首行加上”#coding=utf-8” ,这一句话可控制代码中可输入中文字符
- 牛顿迭代法理论推导及python代码实现
公式不便于在这里编辑,所以在word中编辑好了,截图过来. 用python+牛顿迭代法 求 y =(x-2)**3的解 import numpy as np import matplotlib.p ...
- Java稀疏数组
一.概述 1.概念 2.处理方法 3.示例 原数组如下: 转换为稀疏数组如下: 二.代码 1.主方法 @Testpublic void SparseTest() { // 创建一个原始的二维数组 11 ...
- kmp(前缀出现次数next应用)
http://acm.hdu.edu.cn/showproblem.php?pid=3336 Count the string Time Limit: 2000/1000 MS (Java/Other ...
- 洛谷 P1339 [USACO09OCT]热浪Heat Wave(dijkstra)
题目链接 https://www.luogu.org/problemnew/show/P1339 最短路 解题思路 dijkstra直接过 注意: 双向边 memset ma数组要在读入之前 AC代码 ...
- Centos7防火墙常用命令
有些人安装的linux的系统默认防火墙不是iptables,而是firewall,那就得使用以下方式关闭防火墙了. >>>关闭防火墙 systemctl stop firewalld ...