阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)
分片上传(结合element-ui的upload组件实现自定义上传)
async uploadFree(content){
let data = await this.getOssToken(); //后台返回的OSS秘钥等等
let client = new OSS({
region: data.region,
accessKeyId: data.AccessKeyId,
accessKeySecret: data.AccessKeySecret,
stsToken: data.SecurityToken,
bucket: data.bucketName
});
try {
let result = await client.multipartUpload(content.file.name, content.file, {
progress: async function (p) {//这是上传进度条
content.onProgress({percent: parseInt(p * 100)+'%', returnValue: true });
}
});
return (content.file['response'] = [result].map(curr =>{//on-change回调的参数
return {
code: curr.res.status,
name: content.file.name,
data: curr.res.requestUrls[0].split('?')[0]
}
})[0]);
} catch (e) {
console.log(e)
if (e.code === 'ConnectionTimeoutError') {
content.onError('视频上传超时')
throw "视频上传超时!";
}else{
content.onError('视频上传失败')
}
}
}
官方文档: 传送门
阿里云OSS 服务端签名后直传之分片上传(结合element-ui的upload组件)的更多相关文章
- 使用阿里云OSS的服务端签名后直传功能
网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传 背 ...
- Vue上传通过“服务端签名后直传”上传文件到阿里云 报错 400 Bad Request
我报错的原因是 formData.append('file', file) 放在签名前面了 解决办法 formData.append('file', file) 一定在最后 /** * 上传文件到 o ...
- Ali OSS服务端签名直传并设置上传回调
服务端签名直传并设置上传回调 背景 请参考 Web端直传实践 里的背景介绍. 当采用服务端签名后直传方案后,问题来了,用户上传数据后,很多场景下,应用服务器都要知道用户上传了哪些文件,文件名字,甚至如 ...
- Ali OSS 服务端签名并设置回调,客户端上传文件
一.最近做阿里云oss文件上传开发,一点收获分享给大家,帮助大家绕过一些坑.关于阿里云oss服务的介绍,我这里不做赘述了,可以查看阿里云OSS开发api文档. 在这里我主要介绍下,文件上传流程比较复杂 ...
- Python使用阿里云OSS服务
Python使用阿里云OSS服务 前言: 在远程搭建了一个平台,通过改远程平台进行数据的采集,需要将数据内容传送至本地进行处理:为了实现该功能,考虑了阿里云的OSS对象储存的服务. 40G包月只需1元 ...
- PHP服务端如何通过程序将图上传到指定的图片服务器与图片服务器的优化方案
一:PHP服务端如何通过程序将图上传到指定的图片服务器与图片服务器的优化方案 (1) php服务器把图片处理成缩率图或指定大小的图片在通过PHP程序代码 操作FTP 上传到图片服务器. 二:图片服务器 ...
- angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)
2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...
- ECS上nginx搭建反向代理通过内网访问阿里云OSS服务
对于付不起钱的小伙计,为了给公司省钱,想尽一切招数.今天就来分享一个使用阿里云OSS存储搭配CDN使用的网站服务器部署方法. 简介 阿里云OSS 阿里云提供的一种文件存储方案,和我们以前接触的百度云B ...
- 物联网架构成长之路(18)-接阿里云OSS服务
1.申请/购买OSS服务 在阿里云上申请/购买OSS服务, 然后在会得AccessKeyID,AccessKeySecret,bucketName 这三个东西 2.增删改查 在pom.xml文件上增加 ...
随机推荐
- 离职冷静期文件.doc
<中华人民共和国民法典>通过十三届全国人大三次会议表决,将于2021年1月1日起施行,其中#离婚冷静期#备受关注.多方人士表示,离婚冷静期设立的出发点,不是对婚姻自由的一种破坏,而是让当事 ...
- SpringMVC中的@RequestMapping注解
@RequestMapping:设置请求映射,把请求和控制层中的方法设置映射关系 属性: 当请求路径和@RequestMapping的value属性一致时,则该注解所标注的方法即为处理请求的方法 me ...
- docker中mongdb常用操作
一.进入 --使用本地命令行查看 docker exec -it mongos bash
- Quartz.Net系列(四):Quartz五大构件(Scheduler,Job,Trigger,ThreadPool、JobStore)之ThreadPool、JobStore解析
整体示意图: 1.DefaultThreadPool 如果不存在PropertyThreadPoolType,那么就使用DefaultThreadPool var threadPoolTypeStri ...
- JavaScript中的事件委托(转至大佬)
转至:https://www.cnblogs.com/liugang-vip/p/5616484.html 起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没 ...
- 【Spring注解驱动开发】如何使用@Bean注解指定初始化和销毁的方法?看这一篇就够了!!
写在前面 在[String注解驱动开发专题]中,前面的文章我们主要讲了有关于如何向Spring容器中注册bean的知识,大家可以到[String注解驱动开发专题]中系统学习.接下来,我们继续肝Spri ...
- WeChair项目Alpha冲刺(8/10)
团队项目进行情况 1.昨日进展 Alpha冲刺第八天 昨日进展: 前端:安排页面美化,设计实名认证 后端:用户信息通过dao层存储数据库 数据库:修改数据表属性,与后端部署数据库交互 2.今日安 ...
- Java操作RockeMQ
RocketMQ是阿里巴巴在2012年开源的分布式消息中间件,目前已经捐赠给Apache基金会,已经于2016年11月成为 Apache 孵化项目,相信RocketMQ的未来会发挥着越来越大的作用,将 ...
- vue通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style绑定书写 <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...
- elasticSearch插件的安装以及使用nginx的modles收集nginx的日志
1.首先在windows环境上搭建es的集群 集群的配置如下 #node01的配置: cluster.name: es-itcast-cluster node.name: node01 node.ma ...