init: 初始系统模板
This commit is contained in:
TsMask
11
src/views/tool/build/index.vue
Normal file
11
src/views/tool/build/index.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const msg = ref<string>('愿这世间美好与你环环相扣');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
14
src/views/tool/swagger/index.vue
Normal file
14
src/views/tool/swagger/index.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<script lang="ts" setup>
|
||||
import LinkiFrame from '@/components/LinkiFrame/index.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const baseUrl = import.meta.env.VITE_API_BASE_URL;
|
||||
const url = ref<string>(`${baseUrl}/swagger-ui/index.html`);
|
||||
url.value = 'https://mask-api-midwayjs.apifox.cn/';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LinkiFrame :src="url"></LinkiFrame>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
236
src/views/tool/upload/index.vue
Normal file
236
src/views/tool/upload/index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import { PageContainer } from '@ant-design-vue/pro-layout';
|
||||
import { Modal } from 'ant-design-vue/lib/components';
|
||||
import message from 'ant-design-vue/lib/message';
|
||||
import { FileType, UploadFile } from 'ant-design-vue/lib/upload/interface';
|
||||
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
|
||||
import saveAs from 'file-saver';
|
||||
import {
|
||||
downloadFile,
|
||||
downloadFileChunk,
|
||||
uploadFile,
|
||||
uploadFileChunk,
|
||||
} from '@/api/tool/file';
|
||||
|
||||
let state = reactive<{
|
||||
/**上传状态 */
|
||||
loading: boolean;
|
||||
uploadFilePath: string;
|
||||
downloadFilePath: string;
|
||||
/*文件列表 */
|
||||
fileList: UploadFile<any>[];
|
||||
}>({
|
||||
loading: false,
|
||||
uploadFilePath: '',
|
||||
downloadFilePath: '',
|
||||
fileList: [
|
||||
// {
|
||||
// uid: '1',
|
||||
// percent: 100,
|
||||
// status: 'success',
|
||||
// name: 'xxx.png',
|
||||
// url: '/upload/default/2023/06/xxx.png',
|
||||
// thumbUrl: '/upload/default/2023/06/xxx.png',
|
||||
// },
|
||||
],
|
||||
});
|
||||
|
||||
/**下载文件 */
|
||||
function fnDownload() {
|
||||
const key = 'downloadFile';
|
||||
message.loading({ content: '请稍等...', key });
|
||||
const filePath = state.downloadFilePath;
|
||||
if (!filePath) return;
|
||||
downloadFile(filePath).then(res => {
|
||||
if (res.code === 200) {
|
||||
message.success({
|
||||
content: `已完成下载`,
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
|
||||
saveAs(res.data, fileName);
|
||||
} else {
|
||||
message.error({
|
||||
content: `${res.msg}`,
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**下载切片文件 */
|
||||
function fnDownloadChunk() {
|
||||
const key = 'downloadFileChunk';
|
||||
message.loading({ content: '请稍等...', key });
|
||||
const filePath = state.downloadFilePath;
|
||||
downloadFileChunk(filePath, 5).then(blob => {
|
||||
console.log(blob);
|
||||
if (blob.size === 0) {
|
||||
message.error({
|
||||
content: `文件读取失败`,
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
} else {
|
||||
message.success({
|
||||
content: `已完成下载`,
|
||||
key,
|
||||
duration: 2,
|
||||
});
|
||||
const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
|
||||
saveAs(blob, fileName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**上传前检查或转换压缩 */
|
||||
function fnBeforeUpload(file: FileType) {
|
||||
if (state.loading) return false;
|
||||
const isJpgOrPng = ['image/jpeg', 'image/png'].includes(file.type);
|
||||
if (!isJpgOrPng) {
|
||||
message.error('只支持上传图片格式（jpg、png）', 3);
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('图片文件大小必须小于 2MB', 3);
|
||||
}
|
||||
return isJpgOrPng && isLt2M;
|
||||
}
|
||||
|
||||
/**上传文件 */
|
||||
function fnUpload(up: UploadRequestOption) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: `确认要上传文件吗?`,
|
||||
onOk() {
|
||||
// 发送请求
|
||||
const hide = message.loading('请稍等...', 0);
|
||||
state.loading = true;
|
||||
let formData = new FormData();
|
||||
formData.append('file', up.file);
|
||||
formData.append('subPath', 'default');
|
||||
uploadFile(formData).then(res => {
|
||||
state.loading = false;
|
||||
hide();
|
||||
if (res.code === 200) {
|
||||
message.success('文件上传成功', 3);
|
||||
state.uploadFilePath = res.data.url;
|
||||
state.downloadFilePath = res.data.fileName;
|
||||
} else {
|
||||
message.error(res.msg, 3);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**上传分片 */
|
||||
function fnUploadChunk(up: UploadRequestOption) {
|
||||
const fileData = up.file as File;
|
||||
const item = state.fileList.find(f => f.name === fileData.name);
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: `确认要上传文件吗?`,
|
||||
onOk() {
|
||||
// 发送请求
|
||||
const hide = message.loading('请稍等...', 0);
|
||||
uploadFileChunk(fileData, 4, 'default').then(res => {
|
||||
hide();
|
||||
if (res.code === 200) {
|
||||
message.success('文件上传成功', 3);
|
||||
if (item) {
|
||||
item.url = res.data.url;
|
||||
item.name = res.data.newFileName;
|
||||
item.percent = 100;
|
||||
item.status = 'done';
|
||||
}
|
||||
} else {
|
||||
message.error(res.msg, 3);
|
||||
state.fileList.splice(state.fileList.length - 1, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
if (item) {
|
||||
state.fileList.splice(state.fileList.length - 1, 1);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageContainer title="上传示例">
|
||||
<a-row :gutter="16">
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-card title="普通文件" style="margin-bottom: 16px">
|
||||
<a-row :gutter="8">
|
||||
<a-col :span="24" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
style="margin-bottom: 16px"
|
||||
type="text"
|
||||
placeholder="输入资源文件地址"
|
||||
v-model:value="state.downloadFilePath"
|
||||
>
|
||||
<template #suffix>
|
||||
<a-button type="primary" @click="fnDownload">
|
||||
普通下载
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-input
|
||||
type="text"
|
||||
placeholder="输入资源文件地址"
|
||||
v-model:value="state.downloadFilePath"
|
||||
>
|
||||
<template #suffix>
|
||||
<a-button type="primary" @click="fnDownloadChunk">
|
||||
分片下载
|
||||
</a-button>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<a-space direction="vertical" :size="16">
|
||||
<a-upload
|
||||
name="file"
|
||||
list-type="picture"
|
||||
:max-count="1"
|
||||
:show-upload-list="false"
|
||||
:before-upload="fnBeforeUpload"
|
||||
:custom-request="fnUpload"
|
||||
>
|
||||
<a-button type="default" :loading="state.loading">
|
||||
选择文件
|
||||
</a-button>
|
||||
</a-upload>
|
||||
<a-image
|
||||
:width="128"
|
||||
:height="128"
|
||||
:src="state.uploadFilePath"
|
||||
/>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :lg="12" :md="12" :xs="24">
|
||||
<a-card title="大文件分片上传" style="margin-bottom: 16px">
|
||||
<a-upload
|
||||
v-model:file-list="state.fileList"
|
||||
name="file"
|
||||
list-type="picture"
|
||||
:custom-request="fnUploadChunk"
|
||||
>
|
||||
<a-button> 选择文件 </a-button>
|
||||
</a-upload>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</PageContainer>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Reference in New Issue
Block a user