上传附件——支持表格文件 大小限制10M

上传附件——支持表格文件 大小限制10M

<el-form-item label="上传附件" label-width="80px" prop="url">
    <el-upload
        style="margin-top: 6px"
        class="upload-demo"
        action="#"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-upload="uploadBefore"
        :file-list="fileList"
        :http-request="uploadFile"
        :limit="1"
        :on-exceed="onExceed"
        accept=".xlsx,.xls"
    >
        <div class="el-upload__text">
            <i class="el-icon-circle-plus-outline"></i
            ><span>点击添加附件</span>
        </div>
        <p class="limit-wrap">支持表格文件 大小限制10M</p>
    </el-upload>
</el-form-item>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
    setup(props, { emit }) {
        const state = reactive({
            fileList: [],
            flieurl: '',
            rules: {
                time: [{ required: true }],
                url: [{ required: true, message: '请上传附件' }],
            },
            formFef: null,
        });
        const methods = {
            /**
             * 导入表格
             * @param 文件
             */
            handleRemove: (file): void => {
                const size = file.size / 1024 / 1024 < 10;
                if (!size) {
                    return null;
                } else {
                    state.fileList = [];
                    emit('onUpFile', '');
                }
            },
            uploadBefore: (file): boolean | void => {
                //文件大小限制

                const size = file.size / 1024 / 1024 < 10;
                if (!size) {
                    ElMessage.warning('文件大小不能超过10MB');
                }
                return size;
            },
            handlePreview: (file): void => {},
            onExceed: (file, fileList): void => {
                fileList.length &&
                    ElMessage.warning('每次只能上传一个表格文件');
            },
            uploadFile: (row): void => {
                let fd = new FormData();
                fd.append('file', row.file);
                staffFile.fileUpload(fd).then(res => {
                    state.flieurl = res.data.path;
                    emit('onUpFile', res.data.path);
                    state.formFef.clearValidate();
                });
            },
        };
        return {
            ...methods,
            ...toRefs(state),
        };
    },
});
</script>

<style lang="scss" scoped>
:deep(.el-upload) {
    width: 127px;
    height: 128px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px dashed #d9d9d9;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}
.el-upload__text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    top: 16px;
    cursor: pointer;
    font-weight: 400;
    color: #1890ff;
    line-height: 22px;
    i {
        font-size: 16px;
    }
    span {
        padding: 8px 0;
    }
}
.limit-wrap {
    font-size: 20px;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
    transform: scale(0.5);
}
</style>