分片上传(结合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组件)的更多相关文章

  1. 使用阿里云OSS的服务端签名后直传功能

    网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传 背 ...

  2. Vue上传通过“服务端签名后直传”上传文件到阿里云 报错 400 Bad Request

    我报错的原因是 formData.append('file', file) 放在签名前面了 解决办法 formData.append('file', file) 一定在最后 /** * 上传文件到 o ...

  3. Ali OSS服务端签名直传并设置上传回调

    服务端签名直传并设置上传回调 背景 请参考 Web端直传实践 里的背景介绍. 当采用服务端签名后直传方案后,问题来了,用户上传数据后,很多场景下,应用服务器都要知道用户上传了哪些文件,文件名字,甚至如 ...

  4. Ali OSS 服务端签名并设置回调,客户端上传文件

    一.最近做阿里云oss文件上传开发,一点收获分享给大家,帮助大家绕过一些坑.关于阿里云oss服务的介绍,我这里不做赘述了,可以查看阿里云OSS开发api文档. 在这里我主要介绍下,文件上传流程比较复杂 ...

  5. Python使用阿里云OSS服务

    Python使用阿里云OSS服务 前言: 在远程搭建了一个平台,通过改远程平台进行数据的采集,需要将数据内容传送至本地进行处理:为了实现该功能,考虑了阿里云的OSS对象储存的服务. 40G包月只需1元 ...

  6. PHP服务端如何通过程序将图上传到指定的图片服务器与图片服务器的优化方案

    一:PHP服务端如何通过程序将图上传到指定的图片服务器与图片服务器的优化方案 (1) php服务器把图片处理成缩率图或指定大小的图片在通过PHP程序代码 操作FTP 上传到图片服务器. 二:图片服务器 ...

  7. angulaijs中的ng-upload-file与阿里云oss服务的结合,实现在浏览器端上传文件到阿里云(速度可以达到1.5M)

    2015-10-26 angularjs结合aliyun浏览器端oos文件上传加临时身份验证例子 在服务端获取sts 源码: public class StsServiceSample { // 目前 ...

  8. ECS上nginx搭建反向代理通过内网访问阿里云OSS服务

    对于付不起钱的小伙计,为了给公司省钱,想尽一切招数.今天就来分享一个使用阿里云OSS存储搭配CDN使用的网站服务器部署方法. 简介 阿里云OSS 阿里云提供的一种文件存储方案,和我们以前接触的百度云B ...

  9. 物联网架构成长之路(18)-接阿里云OSS服务

    1.申请/购买OSS服务 在阿里云上申请/购买OSS服务, 然后在会得AccessKeyID,AccessKeySecret,bucketName 这三个东西 2.增删改查 在pom.xml文件上增加 ...

随机推荐

  1. GoldenDict和AutoHotKey的安装和使用

    GoldenDict 下载地址:http://sourceforge.net/projects/goldendict/files/early%20access%20builds/ 官网提供的版本很老, ...

  2. SQL2008R2安装碰到问题的解决方法(iso文件用对应的工具)

    SQL2008R2安装碰到问题的解决方法     安装谁不会啊,这么简单,是啊,可是匹配包时就不是那么顺利啊.就像以前的Ruby还专挑匹配版本的包一样,不像现在的Py自动为我们找,这是Mar 7贴在Q ...

  3. matlab实现梯度下降法(Gradient Descent)的一个例子

    在此记录使用matlab作梯度下降法(GD)求函数极值的一个例子: 问题设定: 1. 我们有一个$n$个数据点,每个数据点是一个$d$维的向量,向量组成一个data矩阵$\mathbf{X}\in \ ...

  4. rust 学习之旅二,关键字和保留字

    当前,以下关键字具有所描述的功能. as-执行原始类型转换,消除包含项目的特定特征的歧义,或在useand extern crate语句中重命名项目async-返回a Future而不是阻塞当前线程a ...

  5. python基础--函数全解析

    函数(重点) (1)初始函数 在认识函数之前,我们先做如下的需求: 让你打印10次"我爱中国,我爱祖国".我们在接触函数之前是这样写的. print('我爱中国,我爱祖国') pr ...

  6. 富文本插件tinymce初始化配置参数说明

    { language: _this.language, // 显示语种 selector: #${_this.tinymceId}, // 容器的id height: _this.height, // ...

  7. koa2 的使用方法:(一)

    1. koa2 使用方法: 安装指令是: npm install koa2 使用koa2 创建项目工程: 1. koa2 (项目工程) 2. 进入项目工程: cd 进入您所创建的项目工程 3. npm ...

  8. Java架构师如何学习?

    引言 古人云:"活到老,学到老."互联网算是最辛苦的行业之一,"加班"对工程师来说已是"家常便饭",同时互联网技术又日新月异,很多工程师都疲 ...

  9. 计算机网络之tcp四次挥手

    TCP的四次挥手(Four-Way Wavehand)1.前言对于"三次握手"我们耳熟能详,因为其相对的简单.但是,我们却不常听见“四次挥手”,就算听过也未必能详细地说明白它的具体 ...

  10. Excel表格中第一个输入的零不显示怎么办?

    Excel表格是办公的人经常要用到的软件,经常用它来统计和记录各种数据,但是有时候表格中第一个数字是零的时候,经常第一个零输入时不显示的,这个情况我们怎么解决呢?这里小编跟大家讲一下希望能帮助大家. ...