typescript
复制代码
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 id
secure: true,
accessKeySecret, //阿里云oss 密钥
bucket: 'cangku', //远程仓库名称 (填写你自己的阿里云仓库)
})
return clients
}
html
复制代码
<template>
<div>
<el-progress
v-if="showPercentage"
style="margin-bottom: 15px"
:text-inside="true"
:stroke-width="20"
:percentage="percentage"
striped
striped-flow
/>
<el-upload
class="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({
// 请求url
action: {
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 = true
console.log('自定义上传了文件', file)
//生成文件md5
const fileMd5 = await getFileMd5(file)
console.log('打印文件的md5', fileMd5)
//生成guid
const fileGuid = newGuid()
console.log('打印生成的文件名称', fileGuid)
//获取上传文件的后缀
const fileSuffix = getExtension(file.file)
console.log('打印获取的文件后缀', fileSuffix)
//生成新文件名
const newFileName = fileGuid + '.' + fileSuffix
console.log('生成新文件名', newFileName)
let AccessKeyId = 'xxxx' //填写你的阿里云oss id
let 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 = false
percentage.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>