添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/components/myUpload/index.vue

@@ -1,20 +1,21 @@
<template>
    <div class="my-upload">
        <el-upload 
        :file-list="fileList" 
        class="upload-demo" 
        action="/sccg/file/medias" 
        :multiple="multiple"
        :show-file-list="flag" 
        :before-upload="beforeUpload" 
        :limit="limit" 
        :on-success="handleSuccess"
        :on-error="handleError" 
        :list-type="listType" 
        :on-preview="handlePreview" 
        :on-remove="handleRemove"
        :headers="getToken()">
            <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
        <div v-if="pictureList.length > 0" class="image-box">
            <div v-for="image in pictureList" :class="{
                'image-box-item': true,
                'image-box-item-cover': isShowUpload
            }">
                <span v-if="isShowUpload" @click="handleDeletePicture(image)"
                    class="image-delete-icon el-icon-delete"></span>
                <el-image :key="image" class="image-content" :src="setPicUrl(image)"
                    :preview-src-list="[image]"></el-image>
            </div>
        </div>
        <el-upload v-if="isShowUpload && pictureList.length < limit" :file-list="fileList" v-loading="loading"
            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" action=""
            :multiple="multiple" :show-file-list="flag" :limit="limit" :list-type="listType" :auto-upload="true"
            :http-request="handleUpload" style="margin-left: 14px">
            <div class="upload-btn">
                <i class="el-icon-plus"></i>
                <span>上传图片</span>
            </div>
@@ -22,109 +23,104 @@
    </div>
</template>
<script>
import imageManagement from "@/api/operate/imageManagement";
import { FILE_ORIGINAL_PATH } from "@/utils";

export default {
    data() {
        return {
            // 文件列表
            fileList: [],
            // 是否显示文件列表
            flag: true,
            flag: false,
            // 多选
            multiple: false,
            // 限制
            limit: 50,
            // 按钮高度
            btnHeight: '120px',
            // 按钮宽度
            btnWidth: '120px',
            limit: 4,
            // 文件列表类型
            listType: 'picture-card'
            listType: "picture-card",
            loading: false
        };
    },
    methods: {
        // 上传之前回调
        beforeUpload(rawFile) {
            if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {
                this.$message.error('图片必须是 jpg/svg/jpeg/png 格式!')
                return false
            } else if (rawFile.size / 105 / 105 > 2) {
                this.$message.error('上传图片不能超过 2MB!')
                return false
        // 验证上传文件
        validateFile(file) {
            if (
                file.type !== "image/png" &&
                file.type !== "image/svg+xml" &&
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg"
            ) {
                this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
                this.loading = false;
                return false;
            }
            return true

            if (file.size / 1024 / 1024 > 5) {
                this.$message.error("上传图片不能超过 5MB!");
                this.loading = false;
                return false;
            }
            return true;
        },
        // 上传成功回调
        handleSuccess(res, file, filelist) {
            if(res.data.url1){
                this.$emit('setPictureUrl',{url:res.data.url1});

        handleUpload(data) {
            this.loading = true;
            const { file } = data;
            const validate = this.validateFile(file);
            if (!validate) {
                return;
            }
            else if(res.data.url2){
                this.$emit('setPictureUrl',{url:res.data.url2});
            }
            else if(res.data.url3){
                this.$emit('setPictureUrl',{url:res.data.url3});
            }
            else{
                this.$emit('setPictureUrl',{url:res.data.url4});
            }
            const formData = new FormData();
            formData.append('file', file);
            imageManagement.importImage(formData)
                .then((url) => {
                    this.$emit('setPictureUrl', { url: url });
                    this.loading = false;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err);
                })
        },
        // 上传失败回调
        handleError(err, file, fileList) {
            console.log(err);
            this.$message({
                type:'error',
                message:err
            })

        handleDeletePicture(imageUrl) {
            this.$emit("delPictureUrl", { url: imageUrl });
        },
        // 获取token
        getToken() {
            const token = sessionStorage.getItem('token');
            const tokenHead = sessionStorage.getItem('tokenHead');
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
            }
        },
        // 预览
        handlePreview(file){
            console.log(file)
        },
        // 移除文件
        handleRemove(file, fileList){
            console.log(file,fileList)
        setPicUrl(item) {
            item = item.replace("[", "").replace("]", "");
            return FILE_ORIGINAL_PATH + item;
        }
    },
    props: {
        // 返回上传成功图片地址
        setPictureUrl:{
            type:Function,
            default:()=>{}
        }
    }
}
        pictureList: {
            type: Array,
            default: () => [],
        },
        isShowUpload: {
            type: Boolean,
            default: () => true,
        },
    },
};
</script>
<style lang="scss" scoped>
.my-upload {
    .upload-demo {
        display: flex;
    }
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-right: 5px;

    :deep(.el-upload--picture-card) {
        width: 120px;
        height: 120px;
    }
    :deep(.el-upload-list__item){
        width: 120px;
        height: 120px;
    }
    .upload-btn {
        // background-color: rgba(249, 249, 249, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        width: 100px;
        height: 100px;

        &:hover i{
        &:hover i {
            color: #409eff;
        }

@@ -137,5 +133,53 @@
            line-height: 22px;
        }
    }

    .image-box {
        display: flex;
        flex-wrap: wrap;
        height: 100px;

        .image-content {
            width: 100px;
            height: 100px;
        }

        .image-delete-icon {
            position: absolute;
            top: 45px;
            left: 45px;
            opacity: 0;
        }

        .image-box-item {
            position: sticky;
            margin: 0 10px;
        }

        .image-box-item-cover:hover {
            .image-content {
                box-shadow: #ffffff;
                opacity: 0.5;
            }

            .image-delete-icon {
                color: red;
                font-size: 14px;
                z-index: 2;
                opacity: 1;
                cursor: pointer;
            }
        }
    }

    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
    }

    :deep(.el-upload-list__item) {
        width: 100px;
        height: 100px;
    }
}
</style>