前端文件、图片直传OOS、分片上传、el-upload上传(vue+elementUI)

前言:基于天翼云的面相对象存储(Object-Oriented Storage,OOS),实现小文件的直接上传,大文件的分片上传。

开发文档地址:网址

在这里插入图片描述

上传之前的相关操作:注册账户,创建 AccessKeyId 和 AccessSecretKey之后,新建一个桶bucket做cors相关配置将暴露的 Headers:设置成: ETag,然后在public文件夹下面的index.html引入相关sdk文件(这里引入的是oos-sdk-6.0.min.js,文档的oos-js-sdk-6.2.zip解压包内部包含了这个文件,以及相关的实现demo案例)
在这里插入图片描述

在这里插入图片描述

一、直接上传(如:图片,小型文件)

在这里插入图片描述
使用的是putObject方法,下面是个uploadFile.vue组件

<template><div><el-uploadaction="#":before-upload="beforeAvatarUpload":list-type="showType":on-preview="handlePictureCardPreview":on-remove="handleRemove":limit="1"ref="uploadPic":file-list="fileList"><!-- 预留的插槽 --><slot name="uploadIcon"></slot></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div>
</template><script>
export default {name: "upLoadFile",props: {fileList: {type: Array,default: () => {return []},},// 文件上传的时候的初始样式showType: {type: String,default: 'picture-card'},},data() {return {dialogVisible: false,clickTime: null,Bucket: null,dialogImageUrl: '',}},methods: {// 直接上传beforeAvatarUpload(file) {let that = thisreturn new Promise((resolve, reject) => {that.clickTime = that.$moment().format("YYYYMMDD")// 这里创建client对象的配置项目说明 文档的options 配置项有详细解释var client = new OOS.S3({accessKeyId: '前面创建的accessKeyId', // 通过天翼云控制台创建的 access keysecretAccessKey: '前面创建的secretAccessKey', // 通过天翼云控制台创建的 secret access key;endpoint: '域名', // OOS 域名signatureVersion: 'v4', // 可选v2 或v4apiVersion: '2006-03-01',s3ForcePathStyle: true});that.Bucket = '桶的名称'const key = that.clickTime + '/' + file.name  // toUpload(that.Bucket, file, key)function toUpload(bucket, file, key) {var params = {Bucket: bucket,Body: file, // file内容Key: key,// 文件名称};client.putObject(params, function (err, data) {if (err) {} else {console.log('上传成功');// 上传成功之后是没有返回值的// 访问的上传成功的图片路径的规则    你的域名/桶的名称/key   (key就是前面拼接的文件名称)}})}})},// 图片展示handlePictureCardPreview(file) {this.dialogImageUrl = file.url;// 图片预览的urlthis.dialogVisible = true;},// 图片移除handleRemove(file) {this.$emit('getImg', [], this.type, 0, '')},}
}
</script><style scoped lang="less">/* 图片封面大小*//deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail,/deep/ .el-upload-list--picture-card .el-upload-list__item,/deep/ .el-upload--picture-card{height: 60px;width: 60px;line-height: 60px;}/deep/ .el-upload-list__item.is-success .el-upload-list__item-status-label{display: none !important;}/deep/ .el-upload-list--picture{display: none;}
</style>

引用组件的地方


<uploadFile :fileList="fileListOne"><i class="el-icon-plus" slot="uploadIcon"></i>
</uploadFile> 

效果如图:
在这里插入图片描述

二、切片上传(大型文件)

使用的是以下四个方法
在这里插入图片描述
子组件uploadFile.vue

<!-- 大型文件切片上传 -->
<template><div><el-uploadaction="#":before-upload="beforeAvatarUpload":list-type="showType":on-preview="handlePictureCardPreview":on-remove="handleRemove":limit="1"ref="uploadPic":file-list="fileList"><slot name="uploadIcon"></slot><!-- <i class="el-icon-plus"></i> --><!-- <Button icon="md-cloud-upload">上传文件</Button> --></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div>
</template><script>
export default {name: "upLoadFile",watch: {moveFileFlag(newVal, oldVal) {console.log('newVal', newVal)if (newVal) {this.handleRemove()}}},props: {fileList: {type: Array,default: () => {return []},},// 文件上传的时候的初始样式showType: {type: String,default: 'picture-card'},// 移除文件moveFileFlag: {type: Boolean,default: false,},disabled: {type: Boolean,default: false,},// 一个页面使用了多次组件的区分type: {type: String,default: ''}},data() {return {dialogVisible: false,clickTime: null,initialId: '',// 分片上传需要的 initial// 分片上传 complete 所需参数MultipartUpload: {Parts: []},chunk: 10485760, // 10Mindex: 0,Bucket: null,dialogImageUrl: '',fileSize: 0,packageVersionName: '',}},methods: {// // 图片上传前beforeAvatarUpload(file) {console.log('file:', file);this.fileSize = Number(file.size / 1024 / 1024).toFixed(2) // 计算文件的大小mblet that = thisreturn new Promise((resolve, reject) => {that.clickTime = that.$moment().format("YYYYMMDD")var client = new OOS.S3({accessKeyId: that.$util.accessKeyId,secretAccessKey: that.$util.secretAccessKey,endpoint: that.$util.endPoint,signatureVersion: 'v4', // 可选v2 或v4apiVersion: '2006-03-01',s3ForcePathStyle: true});that.Bucket = that.$util.BucketName// 上传async function putUPload() {try {const key = that.clickTime + '/' + file.name// let [name, ext] = key.split('.');let lastIndex = key.lastIndexOf('.')let name = key.substring(0, lastIndex)let ext = key.substring(lastIndex + 1,)that.packageVersionName = name.split('/')[1]//每次的起始位置let start = that.chunk * that.index;if (start > file.size) { //分片上传完成,文件合成mergeUpload(key, that.Bucket)return}// //每次分片的大小let bold = file.slice(start, start + that.chunk);//得到文件名称,index的目的是分片不重复let boldName = `${name}${that.index}.${ext}`;console.log('boldName:', boldName);//需要在转换为文件对象let boldFile = new File([bold], boldName)let PartNumber = that.index + 1;if (that.index == 0) {//第一次需要获取uploadIdgetUploadId(boldFile, PartNumber, key, that.Bucket)} else {// 分片上传getUploadPart(boldFile, PartNumber, key, that.Bucket)}} catch (e) {console.log('错误了吗')// 捕获超时异常。}}putUPload();//本接口初始化一个分片上传(Multipart Upload)操作,并返回一个上传 ID,// 此 ID用来将此次分片上传操作中上传的所有片段合并成一个对象。用function getUploadId(file, PartNumber, largeName, BucketName) {var params = {Bucket: BucketName,Key: largeName,// 文件名称};client.createMultipartUpload(params, function (err, data) {if (err) {console.log(err, err.stack); // an error occurredw} else {        // successful response//拿到分片上传需要的id后开始分片上传操作that.initialId = data.UploadId;getUploadPart(file, PartNumber, largeName, that.Bucket)}});}// 该接口用于实现分片上传操作中片段的上传function getUploadPart(file, PartNumber, largeName, BucketName) {var params = {Body: file,Bucket: BucketName,Key: largeName,// 文件名称PartNumber: PartNumber,UploadId: that.initialId,// 分片需要的uploadId};console.log('params:', params);client.uploadPart(params, function (err, data) {if (err) {console.log(err, err.stack);} else {// an error occurredconsole.log('ETag', data);// 存储分片数据that.MultipartUpload.Parts.push({ PartNumber: PartNumber, ETag: data.ETag })that.index++putUPload()};});}//该接口通过合并之前的上传片段来完成一次分片上传过程。function mergeUpload(largeName, BucketName) {var params = {Bucket: BucketName,Key: largeName,// 文件名称UploadId: that.initialId,// 分片需要的uploadIdMultipartUpload: that.MultipartUpload,// 之前所有分片的集合};client.completeMultipartUpload(params, function (err, data) {if (err) {that.index = 0;that.initialId = '';// 分片需要传的值that.MultipartUpload.Parts = [];//分片集合that.$forceUpdate();} else {console.log('上传成功的数据', data);that.$emit('getImg', [{ name: data.Key, url: data.Location }], that.type, that.fileSize, that.packageVersionName)that.$forceUpdate();}});}})},// 图片展示handlePictureCardPreview(file) {this.dialogImageUrl = file.url;// 图片预览的urlthis.dialogVisible = true;},// 图片移除handleRemove(file) {this.index = 0;this.initialId = '';this.MultipartUpload.Parts = [];this.$emit('getImg', [], this.type, 0, '')},}
}
</script><style scoped lang="less">/* 图片封面大小*//deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail,/deep/ .el-upload-list--picture-card .el-upload-list__item,/deep/ .el-upload--picture-card{height: 60px;width: 60px;line-height: 60px;}/deep/ .el-upload-list__item.is-success .el-upload-list__item-status-label{display: none !important;}/deep/ .el-upload-list--picture{display: none;}
</style>

父组件

<template><div><!-- 组件一 --><uploadFile :fileList="fileListOne" type ="addIcon" @getImg="getFile"><i class="el-icon-plus" slot="uploadIcon"></i></uploadFile><!-- 组件二 --><uploadFile :fileList="fileListTwo" type="appUpload" showType="picture" :moveFileFlag="moveFileFlag" @getImg="getFile"><Button slot="uploadIcon" icon="md-cloud-upload">上传文件</Button></uploadFile>  </div>
</template><script>
import uploadFile from "@/views/component/uploadFile/uploadFile.vue";
export default {components: {uploadFile},data() {return {fileListOne: [],fileListTwo: [],moveFileFlag: false}},methods: {getFile(val, type, size, packageVersionName) {console.log('val', val); // val内部就包含了子组件传递过来的文件的下载地址// 逻辑处理,数据回现if (type == 'addIcon') { // 添加图标} else if (type == 'appUpload') { // 应用上传}},}
}
</script><style></style>

最终效果如下:(注:内部细节实现添加了具体功能代码)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/113475.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业怎么优化固定资产管理

在优化固定资产管理的过程中&#xff0c;不仅要关注硬件设备和设施的维护&#xff0c;还要重视软件系统和数据管理。一些可能的方法&#xff1a;  需要建立一套完整的资产管理系统。这个系统应该包括资产的采购、登记、使用、维修、报废等各个环节的管理流程。通过这个系统&a…

智慧工地源码带开发手册文档 app 数据大屏、硬件对接、萤石云

智慧工地解决方案依托计算机技术、物联网、云计算、大数据、人工智能、VR、AR等技术相结合&#xff0c;为工程项目管理提供先进技术手段&#xff0c;构建工地现场智能监控和控制体系&#xff0c;弥补传统方法在监管中的缺陷&#xff0c;最终实现项目对人、机、料、法、环的全方…

Windows安装FFmpeg说明

下载地址 官网 Download FFmpeg Csdn ffmpeg安装包&#xff0c;ffmpeg-2023-08-28-git-b5273c619d-full-build.7z资源-CSDN文库 解压安装&#xff0c;添加环境变量 命令行输入ffmpeg 安装成功

【mysql】MySQL服务无法启动 NET HELPMSG 3534

MySQL服务无法启动 NET HELPMSG 3534 错误描述寻找原因解决方法 错误描述 mysql版本&#xff1a;8.1.0 mysql安装成功之后&#xff0c;使用net start mysql来启动mysql&#xff0c;然后出现了报错 MySQL服务无法启动 NET HELPMSG 3534 寻找原因 1、在cmd中&#xff0c;进入…

React 如何获取上一次 state 的值

React 如何获取上一次 state 的值 一、用 ref 存储上一次的 state 类似 usePrevious function usePrevious(value) {const ref useRef();useEffect(() > {ref.current value;});return ref.current; }二、通过 setState 的入参改为函数获取

electron win系统通知修改通知标题栏

标题栏的 electron.app.Electron 如何修改&#xff1a; var package require("../package.json"); app.setAppUserModelId(package.description); app.setAppUserModelId 在主进程的app这里修改

Flutter 混合开发调试

针对Flutter开发的同学来说&#xff0c;大部分的应用还是Native Flutter的混合开发&#xff0c;所以每次改完Flutter代码&#xff0c;运行整个项目无疑是很费时间的。所以Flutter官方也给我们提供了混合调试的方案【在混合开发模式下进行调试】&#xff0c;这里以Android Stud…

【openEuler创新项目探索】一个Java端的向量化BLAS库VectorBLAS

VectorBLAS简介 VectorBLAS是一个使用Java语言实现的向量化BLAS高性能库&#xff0c;目前已在openEuler社区开源。 VectorBLAS通过循环展开、矩阵分块和内存布局优化等算法优化&#xff0c;对BLAS函数进行了深度优化&#xff0c;并利用VectorAPI JDK提供的多种向量化API实现。…

Baklib是比语雀、Notion、石墨文档更好用的在线知识库管理工具

在当今信息爆炸的时代&#xff0c;如何高效地管理和利用知识成为了每个人都面临的问题。在线知识库管理工具应运而生&#xff0c;帮助用户整理、存储和共享知识。在这篇文章中&#xff0c;我将介绍一个更好用的在线知识库管理工具——Baklib&#xff0c;并探讨它相对于其他知识…

PMAC与Modbus主站进行Modbus Tcp通讯

PMAC与Modbus主站进行Modbus Tcp通讯 创建modbus通讯参数 在项目的PMAC Script Language\Global Includes下创建一个名为00_Modbus_Para.pmh的pmh文件。 Modbus[0].Config.ServerPort 0 Modbus[0].Config.ConnectTimeOut 6000 Modbus[0].Config.SendRecvTimeOut 0 Modbu…

利用Jmeter做接口测试(功能测试)全流程分析

利用Jmeter做接口测试怎么做呢&#xff1f;过程真的是超级简单。 明白了原理以后&#xff0c;把零碎的知识点填充进去就可以了。所以在学习的过程中&#xff0c;不管学什么&#xff0c;我一直都强调的是要循序渐进&#xff0c;和明白原理和逻辑。这篇文章就来介绍一下如何利用…

【机器学习7】特征缩放

特征缩放 &#x1f340;特征缩放的重要性&#x1f331;归一化&#x1f331;标准化&#x1f331;更高级的缩放方法&#x1f338;导入数据集&将数据集划分为训练集和测试集&#x1f338;Sklearn-Learn算法实现归一化&#x1f338;Sklearn-Learn算法实现标准化 &#x1f340;特…

Google登录SDK

一、接入的准备工作 官方文档链接地址&#xff1a;开始使用一键登录和注册 按照步骤进行接入即可 二、项目参考&#xff08;Unity项目&#xff09; 注意&#xff1a;代码版本如果不适用新的Google API 请自行参考最新版本接口 SDKGoogleSignInActivity 主要用于登录的代码。Un…

[Linux]进程程序替换

[Linux]进程程序替换 文章目录 [Linux]进程程序替换进程程序替换的意义见一见进程程序替换进程程序替换的原理进程程序替换中的写时拷贝介绍进程程序替换接口 进程程序替换的意义 Linux系统下使用fork系统函数创建子进程后&#xff0c;子进程只能执行继承的部分父进程代码&…

108页石油石化5G智慧炼化厂整体方案PPT

导读:原文《108页石油石化5G智慧炼化厂整体方案PPT》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。以下是部分内容,

Redis7之介绍(一)

1. 是什么 Redis:REmote Dictionary Server(远程字典服务器&#xff09; Remote Dictionary Server( 远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数据结构&#xff0c;例如String、Hash、List、…

电商数仓项目需求及架构设计

一、项目需求 1.用户行为数据采集平台搭建 2.业务数据采集平台搭建 3.数仓维度建模 4.统计指标 5.即席查询工具&#xff0c;随时进行指标分析 6.对集群性能进行监控&#xff0c;发生异常时报警&#xff08;第三方信息&#xff09; 7.元数据管理 8.质量监控 9.权限管理&#xff…

浅谈Lua协程和函数的尾调用

前言 虽然不经常用到协程&#xff0c;但是也不能谈虎色变。同时&#xff0c;在有些场景&#xff0c;协程会起到一种不可比拟的作用。所以&#xff0c;了解它&#xff0c;对于一些功能&#xff0c;也会有独特的思路和想法。 协程 概念 关于进程和线程的概念就不多说。 那么…

b站手机缓存文件转MP4

b站缓存的文件 音频、视频、弹幕是分开的 这里我只用到了音频和视频所以只介绍这一部分 b站的缓存视频文件和路径结构如下 默认缓存路径 内部存储\Android\data\tv.danmaku.bilil\download\89720189 文件夹结构 文件夹 c_738583 这是单个视频的缓存文件夹 进入c_738583文件夹…

Docker(三) 创建Docker镜像

一、在Docker中拉取最基本的Ubuntu系统镜像 搜索Ubuntu镜像 Explore Dockers Container Image Repository | Docker Hub 下载镜像 docker pull ubuntu:22.04 二、在镜像中添加自己的内容 使用ubuntu镜像创建容器 docker run -it ubuntu:20.04 /bin/bash 在容器中创建了一个文…