forestry-wx/src/components/ut-files-upload/ut-files-upload.vue

<template>
    <view class="">
        <up-button v-if="fileList.length < count" class="mb-10" @click="addFiles" :customStyle="{ color: '#2a6d52', backgroundColor: '#F9FDFB', borderColor: '#E1EEE9' }">
            <up-icon class="mr-5" name="plus-circle" color="#2a6d52" size="30rpx"></up-icon>
            <span>{{ btnText }}</span>
        </up-button>
        <template v-for="(file, index) in fileList" :key="index">
            <view class="d-flex a-c file-item-box mb-10" @click="downloadFile(file)">
                <view class="mr-20">
                    <template v-if="['doc', 'docx', 'DOC', 'DOCX'].includes(getFileSuffix(file?.fileName))">
                        <image class="file-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/doc.png" mode="widthFix" />
                    </template>
                    <template v-if="['pdf', 'PDF'].includes(getFileSuffix(file?.fileName))">
                        <image class="file-icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/pdf.png" mode="widthFix" />
                    </template>
                </view>
                <view class="flex1 ov-hd mr-20">
                    <view class="f-s-28 c-light-black f-w-5 mb-8">{{ file?.fileName }}</view>
                    <view v-if="file?.size" class="f-s-24 c-999">大小：{{changeByte(file?.size)}}</view>
                </view>
                <view class="d-flex flex-cln j-c a-c" @click="deleteFile(index)">
                    <up-icon size="30rpx" color="#f56c6c" name="trash-fill"></up-icon>
                    <view class="f-s-22 c-danger">删除</view>
                </view>
            </view>
        </template>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import upload, { exportDataFn } from '@/utils/upload';
import { changeByte, getFileSuffix } from '@/utils/ruoyi';
const props = defineProps({
    modelValue: {
        type: [Array, Object],
        default: () => []
    },
    btnText: {
        type: String,
        default: '上传文件'
    },
    disabled: {
        type: Boolean,
        default: false
    },
	maxSize: {
		type: Number,
		default: 10
	},
	count: {
		type: Number,
		default: 5 // 默认最多上传5个文件
	},
	extension: {
		type: Array,
		default: () => ['PDF', 'pdf', 'doc', 'docx', 'DOC', 'DOCX'] // 默认支持的文件类型
	}
});
const fileList = ref(props.modelValue || []);
const emit = defineEmits(['update:modelValue']);
const addFiles = async () => {
	if (props.disabled) return;
	uni.chooseMessageFile({
		count: props.count - fileList.value.length,
		type: 'file',
		extension: props.extension,
		success (res) {
			const tempFiles = res.tempFiles;
            uploadFiles(tempFiles)
		},
		fail (err) {
			console.error(err);
			uni.showToast({
				title: '选择文件失败',
				icon: 'none'
			});
		}
	});
};
const deleteFile = (index) => {
    fileList.value.splice(index, 1);
    emit('update:modelValue', fileList.value);
};
// 上传多个文件
const uploadFiles = async (files) => {
    const uploadedFiles = [];
    for (const file of files) {
        if (file.size > props.maxSize * 1024 * 1024) {
            uni.showToast({
                title: `文件 ${file.name} 超过最大限制 ${props.maxSize}MB`,
                icon: 'none'
            });
            continue;
        }
        try {
            const res = await upload({
                filePath: file.path,
                url: '/resource/oss/upload',
                formData: {
                    fileName: file.name,
                }
            });
            if (res.code === 200) {
                uploadedFiles.push({
                    ...res.data,
                    fileName: file.name,
                });
            } else {
                uni.showToast({
                    title: `上传失败: ${res.message}`,
                    icon: 'none'
                });
            }
        } catch (error) {
            uni.showToast({
                title: '上传失败',
                icon: 'none'
            });
        }
    }
    fileList.value = [...fileList.value, ...uploadedFiles];
    emit('update:modelValue', fileList.value);
};
</script>

<style lang="scss" scoped>
.file-item-box {
	padding: 24rpx 30rpx;
	background-color: #fff;
	border: 1rpx solid $u-border-color;
	border-radius: 16rpx;
}

.file-icon {
	width: 56rpx;
	height: 56rpx;
}
</style>