FieldUpload.vue
2.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<template>
<Upload
v-model:file-list="fileList"
name="file"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="/api/localStorage/upload_oss"
accept=".jpg,.jpeg,.gif,.png,.webp"
:data="handleData"
>
<img v-if="imgUrl" :src="imgUrl" alt="avatar" width="100" height="100" />
<div v-else>
<loading-outlined v-if="loading" />
<plus-outlined v-else />
<div class="ant-upload-text">上传</div>
</div>
</Upload>
</template>
<script lang="ts" setup>
import { defineProps, ref } from 'vue';
import { Upload, message } from 'ant-design-vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
const props = defineProps({
imgUrl: String, // 期望 'value' 是一个字符串。根据您的需求调整类型。
});
console.log('%c [ props ]-29', 'font-size:13px; background:pink; color:#bf2c9f;', props);
function getBase64(img: Blob, callback: (base64Url: string) => void) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result as string));
reader.readAsDataURL(img);
}
const handleData = (data) => {
console.log('%c [ data ]-32', 'font-size:13px; background:pink; color:#bf2c9f;', data);
return { name: data.name };
};
const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');
const handleChange = (info: UploadChangeParam) => {
// if (info.file.status === 'uploading') {
// loading.value = true;
// return;
// }
// if (info.file.status === 'done') {
// // Get this url from response in real world.
// getBase64(info.file.originFileObj, (base64Url: string) => {
// imageUrl.value = base64Url;
// loading.value = false;
// });
// }
// if (info.file.status === 'error') {
// loading.value = false;
// message.error('upload error');
// }
};
const beforeUpload = (file: UploadProps['fileList'][number]) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error('图片最大10MB!');
}
return isJpgOrPng && isLt2M;
};
</script>
<style scoped>
.avatar-uploader > .ant-upload {
width: 128px;
height: 128px;
}
.ant-upload-select-picture-card i {
color: #999;
font-size: 32px;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
}
</style>