如何基于 vue3+el-upload 二次封装上传文件组件到阿里云 oss(附上传进度条)

如何基于 vue3+el-upload 二次封装上传文件组件到阿里云 oss 附进度条

  • 一、创建生成全局唯一标识符 方法
  • 二、导入计算文件Md5(spark-md5)
  • 三、安装依赖ali-oss
  • 四、创建导出ali-oss 方法
  • 五、创建上传文件 组件(完整代码)
  • 六、引入使用组件

一、创建生成全局唯一标识符 方法

  • 在utils文件夹下 创建guid.ts
// 生成GUID
export function newGuid() {function S4() {return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)}return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
}

二、导入计算文件Md5(spark-md5)

npm i spark-md5

三、安装依赖ali-oss

npm i ali-oss

四、创建导出ali-oss 方法

  • 在utils文件夹下 创建alioss.ts,并接收所需要的阿里云oss地区、id、密钥、远程仓库名称
import OSS from 'ali-oss'
export function client<T>(accessKeyId: T, accessKeySecret: T) {
//接收过来阿里云id和密钥console.log('接收到的', accessKeyId, accessKeySecret)var clients = new OSS({region: 'oss-cn-beijing', //地区(填写你自己的阿里云oss地区)accessKeyId, //阿里云oss idsecure: true,accessKeySecret, //阿里云oss 密钥bucket: 'cangku', //远程仓库名称 (填写你自己的阿里云仓库)}) return clients
}

五、创建上传文件 组件(完整代码)

  • 创建封装上传文件组件 (代码中需填写阿里云oss的id和密钥)
<template><div><el-progressv-if="showPercentage"style="margin-bottom: 15px":text-inside="true":stroke-width="20":percentage="percentage"stripedstriped-flow/><el-uploadclass="upload-demo":drag="drag":limit="limit":disabled="disabled":auto-upload="autoUpload":accept="accept":show-file-list="showFileList":action="action":multiple="multiple":http-request="httpRequest":before-upload="beforeUpload":on-progress="uploadFileProcess":on-success="handleAvatarSuccess":on-remove="handleRemove":on-exceed="handleExceed":on-change="handleChange"><!-- 拖拽上传 --><div v-if="drag"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div></div><!-- 手动上传 --><div v-else><el-button type="primary">点我上传</el-button></div></el-upload></div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
import SparkMD5 from 'spark-md5'
import { newGuid } from '@/utils/guid'
import { client } from '@/utils/alioss'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
//是否显示上传进度条
const showPercentage = ref(false)
//上传进度
const percentage = ref(0)const props = defineProps({// 请求urlaction: {type: String,},//是否支持多选文件multiple: {type: Boolean,default: () => false,},//是否显示已上传文件列表showFileList: {type: Boolean,default: () => true,},//是否启用拖拽上传drag: {type: Boolean,default: () => true,},//接收的上传类型accept: {type: String,},//允许上传文件的最大数量limit: {type: Number,},//是否禁用上传disabled: {type: Boolean,default: () => false,},//是否自动上传文件autoUpload: {type: Boolean,default: () => true,},
})//获取文件的Mds
const getFileMd5 = (file: any) => {return new Promise((resolve, reject) => {const spark = new SparkMD5.ArrayBuffer()console.log('spark', spark)const fileReader = new FileReader()console.log('fileReader', fileReader)fileReader.onload = (e: any) => {console.log('打印e', e)spark.append(e.target.result)resolve(spark.end())}fileReader.onerror = () => {reject('')}fileReader.readAsArrayBuffer(file.file)})
}//获取文件后缀名
const getExtension = (file: File) => {if (file) {// 通过正则表达式提取文件后缀名const regex = /(?:\.([^.]+))?$/const result = regex.exec(file.name)return result?.[1] || null}return null // 处理输入为 null 的情况
}//自定义上传文件
const httpRequest = async (file: any) => {ElMessage({message: '开始上传,请等待!',type: 'warning',})showPercentage.value = trueconsole.log('自定义上传了文件', file)//生成文件md5const fileMd5 = await getFileMd5(file)console.log('打印文件的md5', fileMd5)//生成guidconst fileGuid = newGuid()console.log('打印生成的文件名称', fileGuid)//获取上传文件的后缀const fileSuffix = getExtension(file.file)console.log('打印获取的文件后缀', fileSuffix)//生成新文件名const newFileName = fileGuid + '.' + fileSuffixconsole.log('生成新文件名', newFileName)let AccessKeyId = 'xxxx'  //填写你的阿里云oss idlet AccessKeySecret = 'xxxx' //填写你的阿里云oss 密钥let res = await client(AccessKeyId, AccessKeySecret).multipartUpload(newFileName,file.file,{progress,parallel: 4, //同时上传数量partSize: 1024 * 1024 * 1, //设置分片大小timeout: 120000, //设置超时时间})console.log('打印上传的结果', res)if (res.res.statusCode === 200) {ElMessage({message: '上传成功!',type: 'success',})} else {file.onError('上传失败')}
}
//上传进度
const progress = (progress: any, checkpoint: any) => {// Object的上传进度。console.log('上传进度', progress)percentage.value = progress.toFixed(2) * 100// 分片上传的断点信息。console.log('分片上传的断点信息', checkpoint)
}
//上传文件之前的钩子函数
const beforeUpload: UploadProps['beforeUpload'] = (file) => {console.log('上传文件之前的钩子函数', file)
}//文件上传时的钩子函数
const uploadFileProcess: UploadProps['onProgress'] = () => {console.log('文件上传时的钩子函数')
}//文件上传成功时的钩子
const handleAvatarSuccess: UploadProps['onSuccess'] = (response,uploadFile
) => {console.log('文件上传成功时的钩子')setTimeout(() => {showPercentage.value = falsepercentage.value = 0}, 300)
}// 文件列表移除文件时的钩子
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {console.log('文件列表移除文件时的钩子')
}//当超出限制时,执行的钩子函数
const handleExceed: UploadProps['onExceed'] = () => {console.log('超出限制时,执行的钩子函数')
}//文件状态改变时的钩子函数
const handleChange: UploadProps['onChange'] = () => {console.log('文件状态改变时的钩子函数')
}
</script><style scoped lang="scss"></style>

六、引入使用组件

  • 引入组件
const UploadFile = defineAsyncComponent(() => import('@/components/uploadFile/index.vue')
)
  • 使用组件
<UploadFile></UploadFile>

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

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

相关文章

数据库的事务四大特性(ACID)、详解隔离性以及隔离级别、锁

文章目录 &#x1f389;数据库的事务四大特性&#xff08;ACID&#xff09;以及隔离性一、事务的四大特性✨1、原子性&#xff08;Atomicity&#xff09;&#x1f38a;2、一致性&#xff08;Consistency&#xff09;&#x1f38a;3、隔离性&#xff08;Isolation&#xff09;&a…

leetcode:389. 找不同

一、题目 函数原型&#xff1a;char findTheDifference(char * s, char * t) 二、思路 作者原先的思路是先将两个字符串从小到大排序&#xff0c;然后两个字符串依次比较。若出现字符串t中的元素和字符串s不相等&#xff0c;则说明该元素就是被添加的字母。 但是&#xff0c;该…

【LeetCode】118. 杨辉三角

118. 杨辉三角 难度&#xff1a;简单 题目 给定一个非负整数 *numRows&#xff0c;*生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例…

农业水土环境与面源污染建模及对农业措施响应

目录 ​专题一 农业水土环境建模概述 专题二 ArcGIS入门 专题三 农业水土环境建模流程 专题四 DEM数据制备流程 专题五 土地利用数据制备流程 专题六 土壤数据制备流程 专题七 气象数据制备流程 专题八 农业措施数据制备流程 专题九 参数率定与结果验证 专题十 模型结…

算法随想录算法训练营第四十七天| 647. 回文子串 516.最长回文子序列

647. 回文子串 题目&#xff1a;给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。回文字符串 是正着读和倒过来读一样的字符串。子字符串 是字符串中的由连续字符组成的一个序列。具有不同开始位置或结束位置的子串&#xff0c;即使是由相同的字…

Python之Excel——复制一个sheet当做模板,生成多个sheet

目录 专栏导读背景思路1、加载模板2、项目文件2、完整版代码:3、视频演示:4、总结:&#x1f44d; 该系列文章专栏&#xff1a;[Python办公自动化专栏] 专栏导读 &#x1f338; 欢迎来到Python办公自动化专栏—Python处理办公问题&#xff0c;解放您的双手 &#x1f3f3;️‍&…

一文弄懂synchronized

简述 synchronized是什么? synchronized 关键字是一种同步锁&#xff0c;它可以保证在一个时刻只有一个线程可以执行某段代码。synchronized 关键字可以用在方法、代码块、静态方法和静态代码块上。 synchronized怎么用&#xff1f; synchronized是Java中用于实现线程同步…

Android和JNI交互 : 常见的图像格式转换 : NV21、RGBA、Bitmap等

1. 前言 最近在使用OpenCV处理图片的时候&#xff0c;经常会遇到需要转换图像的情况&#xff0c;网上相关资料比较少&#xff0c;也不全&#xff0c;有时候得费劲老半天才能搞定。 自己踩了坑后&#xff0c;在这里记录下&#xff0c;都是我在项目中遇到的图像转化操作&#xf…

AI开源 - LangChain UI 之 Flowise

原文&#xff1a;AI开源 - LangChain UI 之 Flowise 一、Flowise 简介 Flowise 是一个为 LangChain 设计的用户界面(UI)&#xff0c;使得使用 LangChain 变得更加容易&#xff08;低代码模式&#xff09;。 通过拖拽可视化的组件&#xff0c;组建工作流&#xff0c;就可以轻…

ScrapeKit库中Swift爬虫程序写一段代码

以下是一个使用ScrapeKit库的Swift爬虫程序&#xff0c;用于爬取网页视频的代码&#xff1a; import ScrapeKit// 创建一个配置对象&#xff0c;用于指定爬虫ip服务器信息 let config Configuration(proxyHost: "duoip", proxyPort: 8000)// 创建一个爬虫对象 let s…

t2017递推1攀天梯

1、攀天梯(2006夏令营检测题) Description 北武当山又名真武山&#xff0c;古称龙王山。北武当山主峰四周几乎都是陡壁悬崖&#xff0c;只有一条人造“天梯”可攀&#xff0c;天梯由N级就山凿筑的石阶组成。 现在&#xff0c;聪聪打算通过天梯攀上北武当山主峰。攀天梯时&am…

diffusers-Load pipelines,models,and schedulers

https://huggingface.co/docs/diffusers/using-diffusers/loadinghttps://huggingface.co/docs/diffusers/using-diffusers/loading 有一种简便的方法用于推理是至关重要的。扩散系统通常由多个组件组成&#xff0c;如parameterized model、tokenizers和schedulers&#xff0c…

Spring-Spring 之底层架构核心概念解析

BeanDefinition BeanDefinition表示Bean定义&#xff0c;BeanDefinition中存在很多属性用来描述一个Bean的特点。比如&#xff1a; class&#xff0c;表示Bean类型scope&#xff0c;表示Bean作用域&#xff0c;单例或原型等lazyInit&#xff1a;表示Bean是否是懒加载initMeth…

LeetCode 421. 数组中两个数的最大异或值

原题链接&#xff1a;https://leetcode.cn/problems/maximum-xor-of-two-numbers-in-an-array/description/?envTypedaily-question&envId2023-11-04 题目分析 异或且时间复杂度在nlogn内第一反应想到字典树&#xff0c;扫一遍存进字典树&#xff0c;然后遍历每个数&…

【Git企业开发】第四节.Git的分支管理策略和bug分支

文章目录 前言一、Git的分支管理策略 1.1 Fast forward 模式和--no-ff 模式 1.2 企业分支管理策略二、bug分支三、删除临时分支四、总结总结 前言 一、Git的分支管理策略 1.1 Fast forward 模式和--no-ff 模式 通常合并分支时&#xff0c;如果可能&#xff0c;Git 会…

AI:51-基于深度学习的电影评价

🚀 本文选自专栏:AI领域专栏 从基础到实践,深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家,通过案例和项目实践,掌握核心概念和实用技能。每篇案例都包含代码实例,详细讲解供大家学习。 📌📌📌本专栏包含以下学习方向: 机器学习、深度学…

【CSS】div 盒子居中的常用方法

<body><div class"main"><div class"box"></div></div> </body>绝对定位加 margin: auto; &#xff1a; <style>* {padding: 0;margin: 0;}.main {width: 400px;height: 400px;border: 2px solid #000;positio…

Dart 语法总结

Dart语法总结 变量Hello World变量声明数据类型函数使用面向对象Dart 特殊运算符 变量 Hello World /*** 1.main函数是dart入口* 2. 参数args&#xff0c; 类型为List<String> - 泛型 */ void main(List<String> args) {print("hello world"); }变量声…

centos系统源码编译安装nginx,并编写服务脚本

1.安装编译所需的依赖项&#xff1a; yum install -y gcc pcre-devel openssl-devel zlib-devel2.下载 Nginx 源代码&#xff1a; wget http://nginx.org/download/nginx-1.21.3.tar.gz tar -xf nginx-1.21.3.tar.gz cd nginx-1.21.33.配置编译选项并进行编译和安装&#xff…

hook cookie

(function() {use strict;var cookieTemp "";Object.defineProperty(document, cookie, {set: function(val) {console.log(Hook捕获到cookie设置->, val);debugger;cookieTemp val;return val;},get: function(){return cookieTemp;}}); })();