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

• 在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>