vue+element实现天翼云oos上传文件

最近遇到了一个新的需求，需要把原先上传文件的方式改为利用天翼云oos对象存储上传。这个问题着实卡了我好几天时间，不过方法总比困难多，最后也是成功实现文件的上传。话不多说，接下来列举实现步骤。（实现过程中，部分页面可能存在样式丑陋问题，请先忽略）
关于天翼云的其他配置，可以参考这份文件
oos开发文档.

一、引入静态资源

在public目录index.html文件中引入静态资源，如下所示：

二、引入element上传组件

html部分我只做截图展示，这个地方我封装了一个组件，如下图所示

三、创建oos对象

//对上传的文件做限制
beforeUpload(file) {let fileSize = file.size / 1024 / 1024;if (fileSize > 1024) {this.fileList = [];return this.$message.warning("文件大小不能超过1G");}if (file.type !== "video/mp4") {this.fileList = [];return this.$message.warning("课件资源只能上传mp4格式文件");}},//文件上传async pickFile(f) {const file = f.file;//获取临时授权令牌const { code, data } = await this.$api.base.temporaryToken();if (code != 200) return;const s3Config = {accessKeyId: data.accessId,secretAccessKey: data.accessSecret,endpoint: 'oos',signatureVersion: "v4", // 可选v2 或v4apiVersion: "2006-03-01",s3ForcePathStyle: true,};//设置tokenif (data.sessionToken.length > 0) {s3Config.sessionToken = data.sessionToken;}const client = new OOS.S3(s3Config);let key = `RESOURCE/RESOURCE/keyName`;let params = {Body: file,Bucket: '',Key: key,ContentLength: file.size,ContentType:'video/mp4'//上传视频文件若没有设置该字段，我试过待会获取链接之后打开无法访问};let that = this;client.putObject(params, function (err, data) {if (err) {that.$message("上传失败");} else {that.$message("上传成功");that.fileList = [];//上传成功后，文件列表清空//保存上传记录const url = URL.createObjectURL(file);const audioElement = new Audio(url);audioElement.addEventListener("loadedmetadata", async () => {let record = {id: res_keyId.data,key: key,bucket: '',fileType: '',//上传的文件类型，fileOriginalName: file.name,businessCode: '',materialCode: '',fileSize: file.size,};//若上传的为视频，需要给后端传递视频时长if (video) {record.videoFileDuration = Math.floor(audioElement.duration);}//传递给后端，保存上传记录const res_recore = await that.$api.base.saveRecord(record);if (res_recore.code != 200) return;that.$emit("uploadSuccess", true);//获取文件临时访问路径const res_router = await that.$api.base.getTemporaryRouter({objKey: key,});if (res_router.code != 200) return;that.$emit("getTemporaryRouter", res_router.data);});}});},confirmUpload() {this.$refs.upload.submit();},

四、上传文件

最后在需要上传的地方引用上传组件，就选择文件进行上传了。

vue+element实现天翼云oos上传文件相关推荐

如何向天翼云服务器上传文件,天翼云盘如何上传文件？
天翼云盘官方版是一个提供文件同步.备份及分享等服务的网络云存储平台.您可以通过网页.pc客户端及移动客户端随时随地的把照片.音乐.视频.文档等轻松地保存到网络,无须担心文件丢失.通过天翼云,多终端上传 ...
如何向天翼云服务器上传文件,天翼云储存上传文件的方法
也许您总是担心电脑里的重要资料会因为电脑故障而意外丢失?也许您总是为了保存文件,用U盘拷贝的同时还发送一份邮件给自己?也许您总是苦恼于相片太多,手机内存空间不够用?立刻开始使用天翼云,一切将迎刃而解! ...
教你三分钟上手阿里云OOS上传操作
教你三分钟上手阿里云OOS上传操作 1.注册登录如果小伙伴需要进行使用阿里云oss操作,第一步我们得注册/登录阿里云 https://www.aliyun.com/,小编建议大家尽量使用支付宝登录, ...
SpringBoot整合阿里云OSS上传文件
一.需求分析文件上传是一个非常常见的功能,就是通过IO流将文件写到另外一个地方,这个地方可以是项目下的某个文件夹里,或者是本地电脑某个盘下面,还可以是云服务OSS里面,这里就是我要讲到的OSS,我写 ...
thinkPHP 阿里云OSS 上传文件、直接下载
阿里云OSS 上传文件.直接下载 1. 安装OSS SDK composer require aliyuncs/oss-sdk-php 2. thinkPHP接口 public function up ...
怎么样向云服务器上传文件_向云服务器上传文件以及移动到指定文件夹
向云服务器上传文件以及移动到指定文件夹一.上传文件到云服务器 1. 打开 CuteFTP ,服务器 IP 地址设置为 101.227.245.9 .用户名和密码为空,端口 21 ,点击连接: 出现对 ...
云服务器上传文件软件,云服务器上传文件软件
云服务器上传文件软件内容精选换一换弹性云服务器支持通过内网访问OBS,OBS可供用户存储任意类型的数据.将图片.视频等数据存储至OBS后,在ECS上可以访问OBS,下载桶中的图片或视频等数据.通 ...
华为服务器上传文件,云服务器上传文件方式
云服务器上传文件方式内容精选换一换安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据传 ...
利用腾讯云进行上传文件
1.导入依赖 <dependency><groupId>com.qcloud</groupId><artifactI ...