162 lines
3.8 KiB
Vue
162 lines
3.8 KiB
Vue
<template>
|
||
<view class="upload-file" @click="chooseImage" :style="returnStyle('box')">
|
||
<slot v-if="$slots.default"></slot>
|
||
<view class="icon" v-if="!modelValue">+</view>
|
||
<image class="img" v-else :src="modelValue" :style="returnStyle('img')"></image>
|
||
|
||
<view class="close" @click.stop="() => {}" v-if="modelValue">
|
||
<up-icon name="close-circle" color="#333" size="14" @click="clearImg"></up-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
uploadFile
|
||
} from '@/http/api/index.js';
|
||
import {
|
||
ref
|
||
} from 'vue';
|
||
|
||
const props = defineProps({
|
||
size: {
|
||
default: ''
|
||
},
|
||
// 图片最大上传大小，单位M，默认undefined（不限制大小）
|
||
maxSize: {
|
||
type: [Number, String], // 支持数字（如2）或字符串（如"2"）传参
|
||
default: undefined,
|
||
validator: (value) => {
|
||
// 校验：传参必须是大于0的数字（转换后），否则视为不限制
|
||
const numValue = Number(value);
|
||
return value === undefined || (!isNaN(numValue) && numValue > 0);
|
||
}
|
||
}
|
||
})
|
||
|
||
function returnStyle(type) {
|
||
let size = null
|
||
if (!props.size) {
|
||
return
|
||
}
|
||
if (Number(props.size) === NaN) {
|
||
size = props.size
|
||
} else {
|
||
size = props.size + 'rpx'
|
||
}
|
||
return {
|
||
width: size,
|
||
height: size
|
||
}
|
||
}
|
||
|
||
const modelValue = defineModel({
|
||
type: String,
|
||
default: ''
|
||
});
|
||
|
||
const emits = defineEmits('uploadSuccess')
|
||
|
||
// ------------- 新增2：工具函数：将M转换为字节（1M = 1024 * 1024 字节） -------------
|
||
/**
|
||
* 转换文件大小单位（M → 字节）
|
||
* @returns {number} 最大允许的文件字节数，返回0表示不限制
|
||
*/
|
||
function getMaxFileSizeInBytes() {
|
||
if (props.maxSize === undefined) return 0; // 未传参，返回0（不限制）
|
||
|
||
const maxSizeNum = Number(props.maxSize);
|
||
// 无效数值，返回0（不限制）
|
||
if (isNaN(maxSizeNum) || maxSizeNum <= 0) return 0;
|
||
|
||
// 转换公式：1M = 1024KB，1KB = 1024字节
|
||
return maxSizeNum * 1024 * 1024;
|
||
}
|
||
|
||
// ------------- 修改1：在上传前增加文件大小校验 -------------
|
||
function chooseImage() {
|
||
uni.chooseImage({
|
||
count: 1, //默认9
|
||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'],
|
||
success: async function(res) {
|
||
// 1. 获取文件信息（大小、临时路径等）
|
||
const tempFile = res.tempFiles[0];
|
||
const maxFileSize = getMaxFileSizeInBytes();
|
||
|
||
// 2. 校验文件大小（仅当maxFileSize>0时才校验）
|
||
if (maxFileSize > 0 && tempFile.size > maxFileSize) {
|
||
uni.showToast({
|
||
title: `图片大小不能超过${props.maxSize}M`,
|
||
icon: 'none'
|
||
});
|
||
return; // 校验失败，终止后续上传逻辑
|
||
}
|
||
|
||
// 3. 校验通过，执行上传
|
||
uni.showLoading({
|
||
title: '上传中'
|
||
});
|
||
console.log(res);
|
||
const fileRes = await uploadFile(tempFile);
|
||
uni.hideLoading();
|
||
|
||
if (fileRes) {
|
||
modelValue.value = fileRes;
|
||
emits('uploadSuccess', fileRes)
|
||
} else {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function clearImg() {
|
||
modelValue.value = '';
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.upload-file {
|
||
$size: 128rpx;
|
||
width: $size;
|
||
height: $size;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 8rpx;
|
||
position: relative;
|
||
|
||
.close {
|
||
position: absolute;
|
||
right: -10rpx;
|
||
top: -10rpx;
|
||
}
|
||
|
||
.img {
|
||
width: $size;
|
||
height: $size;
|
||
}
|
||
|
||
.icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 4rpx solid #999;
|
||
border-radius: 8rpx;
|
||
font-weight: 700;
|
||
color: #999;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
line-height: 1;
|
||
padding: 0;
|
||
margin: 0;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style> |