feat(user): Add file type check and size determination

- 增加 文件类型检查
- 增加 文件大小限制,800KB
This commit is contained in:
Aqr-K
2024-11-03 18:28:07 +08:00
parent 1c4d806e58
commit 9cbafdfab8
2 changed files with 31 additions and 5 deletions

View File

@@ -82,10 +82,24 @@ function changeAvatar(file: Event) {
const fileReader = new FileReader()
const { files } = file.target as HTMLInputElement
if (files && files.length > 0) {
fileReader.readAsDataURL(files[0])
const selectedFile = files[0]
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
const maxSize = 800 * 1024
// 检查文件是否为图片
if (!allowedTypes.includes(selectedFile.type)) {
$toast.error('上传的文件不符合要求,请重新选择头像');
return;
}
// 检查文件大小
if (selectedFile.size > maxSize) {
$toast.error('文件大小不得大于800KB')
return
}
fileReader.readAsDataURL(selectedFile)
fileReader.onload = () => {
if (typeof fileReader.result === 'string') {
currentAvatar.value = fileReader.result
$toast.success('新头像上传成功,待保存后生效!')
}
}
}
@@ -289,7 +303,7 @@ onMounted(() => {
</VBtn>
</div>
<p class="text-body-1 mb-0">允许 JPGPNGGIF 格式 最大尺寸 800K</p>
<p class="text-body-1 mb-0">允许 JPGPNGGIF 格式 最大尺寸 800KB</p>
</form>
</VCardText>
<VCardText>