el-upload上传附件，如何限制附件类型和附件大小

一、直接上代码

<template>
    <!-- 普通附件上传一个（加额外参数index） -->
    <!-- 话题上传附件 -->
    <!-- dataParams: {
        fileType: "",
        projectId: "",
        moduleId: "",
        topicId: "",
      }, -->
    <!-- :disabled="uploadDisabled" -->
    <el-upload
        class="upload-demo"
        :action="actionUrl"
        :on-remove="attachRemove"
        :before-remove="attachBeforeRemove"
        :multiple="false"
        :on-progress="attachProgress"
        :on-error="attachError"
        :before-upload="handleBeforeUpload"
        :on-success="attachUploadSuccess"
        :on-preview="attachPreview"
        :headers="headers"
        :file-list="fileDataList"
        :data="dataParams"
        :disabled="uploadDisabled"
    >
        <el-button
            size="small"
            type="primary"
            plain
            :disabled="uploadDisabled"
            icon="el-icon-upload"
        >
            {{ uploadDisabled ? '上传中...' : '+ 上传附件' }}
            <!-- {{ '上传附件' }} -->
        </el-button>
    </el-upload>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'uploadComponentIndex',
    props: {
        attachFileList: {
            type: Array,
            default() {
                return [];
            },
        },
        // 索引 ----根据index删除指定的附件
        index: {
            type: Number,
            default: 0,
        },
        // 话题id
        talkId: {
            type: String,
            default: '',
        },
        fileType: {
            type: String,
            default: '',
        },
        // 是新增还是编辑话题
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            uploadDisabled: false,
            fileDataList: [],
            dataParams: {},
        };
    },
    computed: {
        actionUrl() {
            return process.env.VUE_APP_WEB_API + '/url';
        },
        headers() {
            return { token: this.$store.state.token };
        },
        ...mapState(['projectModule']),
    },
    watch: {
        attachFileList: {
            //监听的对象
            deep: true, //深度监听设置为 true
            immediate: true,
            handler: function (newV, oldV) {
                this.fileDataList = newV;
            },
        },
        // 话题编辑和新增的时候用到
        type: {
            deep: true, //深度监听设置为 true
            immediate: true,
            handler: function (newV, oldV) {
                console.log(newV, 'warch--上传监听是add还是edit');
                if (newV == 'editKnow') {
                    // 知识库编辑上传附件时候
                    this.dataParams = {
                        fileType: this.fileType,
                        // projectId: this.projectModule.projectId,
                        // moduleId: this.projectModule.moduleId,
                        topicId: this.talkId,
                    };
                } else {
                    this.dataParams = {
                        fileType: this.fileType,
                        projectId: this.projectModule.projectId,
                        moduleId: this.projectModule.moduleId,
                        topicId: this.talkId,
                    };
                }
            },
        },
    },

    methods: {
        attachProgress() {
            this.uploadDisabled = true;
        },
        attachError(err, file, fileList) {
           //上传失败code!=200的时候也不会执行这个函数，我也不知道为什么
            this.uploadDisabled = false;
        },
        attachRemove(file) {
            if (file && file.status === 'success') {
                //移除方法
                this.$emit('DialogDeleteId', {
                    ...file,
                    fileType: this.fileType,
                    index: this.index,
                });
            }
        },
        attachBeforeRemove(file, fileList) {
            if (file && file.status === 'success') {
                //移除方法
                return this.$confirm(`确定移除 ${file.name}？`);
            }
        },
        attachUploadSuccess(response, file, fileList) {
            this.uploadDisabled = false;
            //res.code!=200的时候也会执行上次成功函数
            this.fileDataList.push({
                id: response.data[0].id,
                name: response.data[0].fileName,
                url: response.data[0].url,
            });
            this.$emit('DialogOk', {
                fileData: this.fileDataList,
                fileType: this.fileType,
                index: this.index,
            });
        },
        handleBeforeUpload(file) {
            //录音：WAV，MP3，AAC，FLAC，OGG  ====
            // 视频：MP4，AVI，MOV，WMV，WEBM,FLV，MKV ====mkv不支持
            // 检测文件类型
            console.log(file.type, this.fileType, '上传类型');

            let isFileType;
            if (this.fileType == 3) {
                isFileType = [
                    'audio/mpeg',
                    'audio/wav',
                    'audio/aac',
                    'audio/flac',
                    'audio/ogg',
                ].includes(file.type);
                if (!isFileType)
                    this.$message({
                        message: '上传格式仅支持mp3,wav,aac,flac,ogg!',
                        type: 'error',
                        showClose: true,
                        offset: 80,
                    });
                return isFileType;
            } else if (this.fileType == 4) {
                isFileType = ['image/jpeg', 'image/png', 'image/jpg', 'image/svg+xml'].includes(
                    file.type
                );
                if (!isFileType)
                    this.$message({
                        message: '上传格式仅支持jpeg,png,jpg,svg!',
                        type: 'error',
                        showClose: true,
                        offset: 80,
                    });
                return isFileType;
            } else if (this.fileType == 5) {
                isFileType = ['video/mp4', 'video/quicktime', 'video/webm'].includes(file.type);
                if (!isFileType)
                    this.$message({
                        message: '上传格式仅支持mp4,mov,webm!',
                        type: 'error',
                        showClose: true,
                        offset: 80,
                    });
                return isFileType;
            } else {
                isFileType = [
                    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                    'application/msword',
                    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                    'application/vnd.ms-excel',
                    'text/csv',
                    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
                    'application/vnd.ms-powerpoint',
                    'application/pdf',
                ].includes(file.type);
                if (!isFileType)
                    this.$message({
                        message: '上传格式仅支持.docx,.doc,.xlsx,.xls,.csv,.ppt,.pptx,.pdf!',
                        type: 'error',
                        showClose: true,
                        offset: 80,
                    });
                return isFileType;
            } 
        },
        attachPreview(file) {
            this.$emit('DialogPreview', {
                index: this.index,
                fileType: this.fileType,
                ...file,
            });
            return false;
            // let newFile = file.url.split('/')
            // let header = newFile[0] + '//' + newFile[2] + '/'
            // let end = file.url.slice(header.length)
            // window.open(header + encodeURIComponent(end), '_blank')
        },
    },
};
</script>

<style lang="scss"></style>

没有了~~~~