分片上传(结合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. api请求允许跨域的问题

    让api请求允许跨域 header("Access-Control-Allow-Origin:*");header('Access-Control-Allow-Credential ...

  2. Sequence in the Pocket【思维+规律】

    Sequence in the Pocket 题目链接(点击) DreamGrid has just found an integer sequence  in his right pocket. A ...

  3. 关于自动寻路(Navigation)的初级总结

    1.使用Nav Mesh Link组件 该组件会实现寻路者从Start跳向end点 注意Player会优先选择最佳路线,且Start,End两个物体都应该在Walkable的区域上 2.使用Nav M ...

  4. Head First 设计模式

    OO基础 抽象 封装 多态 继承 OO原则 封装变化 多用组合,少用继承 针对接口编程,不针对实现编程 为交互对象之间的松耦合设计而努力 对扩展开放,对修改关闭 依赖抽象,不要依赖具体类 最少知识原则 ...

  5. @Inherited 注解的作用

    @Inherited 用于放在注解上,例如 @Inherited @Documented @Target(ElementType.TYPE) public @interface InheritedAn ...

  6. Python三大器之装饰器

    Python三大器之装饰器 开放封闭原则 一个良好的项目必定是遵守了开放封闭原则的,就比如一段好的Python代码必定是遵循PEP8规范一样.那么什么是开放封闭原则?具体表现在那些点? 开放封闭原则的 ...

  7. Day11-微信小程序实战-交友小程序-附近的人(地图的形式)及位置获取

    回顾:在下面的tabbar中,我们已经实现了首页 消息 我的,就剩下”附近“页面了 ”附近“的页面主要是用地图来进行展示的(可以显示我的位置,也可以显示周围附近的人的位置) (在地图里面点击它的头像的 ...

  8. activiti学习笔记一

    activiti学习笔记 在讲activiti之前我们必须先了解一下什么是工作流,什么是工作流引擎. 在我们的日常工作中,我们会碰到很多流程化的东西,什么是流程化呢,其实通俗来讲就是有一系列固定的步骤 ...

  9. Python实用笔记 (13)函数式编程——返回函数

    函数作为返回值 我们来实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_sum(*args): ax = 0 for n in args: ax = ax + n ret ...

  10. 自定义Springboot全局异常类

    一.简要说明 如何实现网上文章基本是随便一搜就可以很快找到, 这里不再赘述. 二.Spring-web和Spring-webmvc 通过idea查看到两个注解位于 spring-web-5.2.2.R ...