abu/wzj-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 使用element-plus组件

Browse Source
This commit is contained in:
AprilWind 2024-12-02 18:25:09 +08:00
parent 7d2e98cb05
commit bb90b0e68b
1 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/PartUpload/index.vue
View File

@ -1,15 +1,16 @@
<template> <template>
<div> <div>
<a href='https://gitee.com/dromara/RuoYi-Vue-Plus/pulls/522'>分支地址</a> <a href="https://gitee.com/dromara/RuoYi-Vue-Plus/pulls/522">分支地址</a>
<Progress :status='uploadStatus' :percent='percent' /> <!-- 使用 element-plus 的 Progress 组件 -->
<input type='file' @change='handleFileChange' /> <el-progress :status="uploadStatus" :percentage="percent" />
<input type="file" @change="handleFileChange" />
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { md5 } from 'hash-wasm'; import { md5 } from 'hash-wasm';
import { httpInstance, multipartUpload, type PartUploadList } from '@/utils/partUpload'; import { httpInstance, multipartUpload, type PartUploadList } from '@/utils/partUpload';
import { message, Progress } from 'ant-design-vue'; import { ElMessage, ElProgress } from 'element-plus'; // 引入 element-plus 的组件
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
/** /**
@ -31,7 +32,7 @@ async function handleFileChange(e: any) {
const fileSize = file.size; const fileSize = file.size;
if (fileSize <= CHUNK_SIZE) { if (fileSize <= CHUNK_SIZE) {
message.error('文件大小不能小于5MB'); ElMessage.error('文件大小不能小于5MB'); // 使用 element-plus 的 ElMessage 显示错误
return; return;
} }
@ -59,14 +60,8 @@ async function handleFileChange(e: any) {
const partUploadList: PartUploadList[] = []; const partUploadList: PartUploadList[] = [];
for (let i = 0; i < chunks.length; i++) { for (let i = 0; i < chunks.length; i++) {
const chunk = chunks[i]; const chunk = chunks[i];
// const uint8array = new Uint8Array(await chunk.arrayBuffer());
// const md5Digest = await md5(uint8array);
const uploadResp = await multipartUpload({ const uploadResp = await multipartUpload({
ossStatus: 'upload', ossStatus: 'upload',
/***
* 大坑 这里不能传md5 否则上传失败
*/
// md5Digest,
uploadId, uploadId,
partNumber: i + 1 partNumber: i + 1
}); });
@ -76,7 +71,6 @@ async function handleFileChange(e: any) {
const minioResp = await httpInstance.put(privateUrl, chunk, { const minioResp = await httpInstance.put(privateUrl, chunk, {
headers: { headers: {
'Content-Type': 'application/octet-stream' 'Content-Type': 'application/octet-stream'
// 'Content-MD5': md5Digest,
} }
}); });
@ -99,6 +93,10 @@ async function handleFileChange(e: any) {
partUploadList partUploadList
}); });
message.success('上传成功'); ElMessage.success('上传成功'); // 使用 element-plus 的 ElMessage 显示成功信息
} }
</script> </script>
<style scoped>
/* 你可以在这里添加一些样式 */
</style>