zp-element-plus 组件库

UploadFile 介绍

该组件是基于 Element-plus 框架的 Upload 二次封装。

基本使用

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        id="box1"
        loadingContainer="#box1"
        name="uploadFile"
        action="/test/api/quality/common/file/upload"
        :show-file-list="true"
        @onPreviewFile="previewFile"
    />
    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFileRef = ref();

// 单击名称 needDownload 为false才执行
const previewFile = (uploadFile) => {
    console.log('文件', uploadFile);
};
// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};
</script>

回显文件列表-`ref`

去掉了 element-plus 中的 file-list 属性，而使用 ref 回显文件列表，适用于表格中。普通上传也可以使用。当文件改变的时候，不会从新渲染整个表格，用户界面不会闪屏，因为此时改变的是子组件里面的数据源，而非父组件的数据源。

单击文件名可下载文件

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box2"
        loadingContainer="#box2"
        action="/test/api/quality/common/file/upload"
        :show-file-list="true"
        needDownload
    />
    <el-button type="primary" @click="getFileList">获取文件列表1</el-button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const uploadFileRef = ref();

// 获取接口详情的文件列表
const getDetail = () => {
    setTimeout(() => {
        const files = [
            {
                name: 'img01.jpg',
                url: 'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
            },
            {
                name: 'img02.jpg',
                url: 'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
            },
        ];
        uploadFileRef.value.fileList = [...files];
    }, 1000);
};
// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};

onMounted(() => {
    getDetail();
});
</script>

文件大小限制

通过 maxSize 控制所有文件的大小限制。

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box3"
        loadingContainer="#box3"
        action="/test/api/quality/common/file/upload"
        :show-file-list="true"
        :maxSize="3"
    />
    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFileRef = ref();

// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};
</script>

复杂的文件大小限制

通过 maxSizeList 分别控制不同文件类型的大小限制。

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box4"
        loadingContainer="#box4"
        action="/test/api/quality/common/file/upload"
        :show-file-list="true"
        :maxSizeList="[
            { types: ['image'], maxSize: 3, errTip: '图片文件大小不超过3M' },
            { types: ['video', 'audio'], maxSize: 4, errTip: '视频音频文件大小不超过4M' },
            { types: ['other'], maxSize: 5, errTip: '文件大小不能超过5M' },
        ]"
    />
    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFileRef = ref();

// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};
</script>

触发插槽 / Tip插槽 / 默认插槽

自定义按钮，提示文案。

下载模板

支持jpg、png格式；图片文件大小不超过5M

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box5"
        loadingContainer="#box5"
        action="/test/api/quality/common/file/upload"
        :multiple="true"
        :show-file-list="true"
        accept=".jpg,.png"
        needDownload
        @onPreviewFile="previewFile"
    >
        <template #trigger>
            <el-button>+ 上传文件</el-button>
        </template>
        <a class="dib ml-10">下载模板</a>
        <template #tip>
            <div class="el-upload__tip">支持jpg、png格式；图片文件大小不超过5M</div>
        </template>
    </ZpUploadFile>

    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFileRef = ref();

// 单击名称 needDownload 为false才执行
const previewFile = (uploadFile) => {
    console.log('文件', uploadFile);
};
// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};
</script>

单个拖拽上传

拖拽上传时，只能上传一个文件，上传成功后，展示在上传框中。如果不需要该功能，则去掉 singleDrag 属性即可。

点击或将文件拖拽到这里上传

支持扩展名：.jpg,.png

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box6"
        loadingContainer="#box6"
        action="/test/api/quality/common/file/upload"
        :multiple="true"
        :show-file-list="true"
        accept=".jpg,.png"
        drag
        singleDrag
        @onPreviewFile="previewFile"
    >
    </ZpUploadFile>
    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFileRef = ref();

// 单击名称 needDownload 为false才执行
const previewFile = (uploadFile) => {
    console.log('文件', uploadFile);
};
// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};
</script>

覆盖单个上传

只能上传一个文件，再次上传会覆盖上次的文件。

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box7"
        loadingContainer="#box7"
        action="/test/api/quality/common/file/upload"
        :show-file-list="true"
        accept=".jpg,.png"
        @onPreviewFile="previewFile"
        :limit="1"
        isReUpload
    >
    </ZpUploadFile>
    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const uploadFileRef = ref();

// 单击名称 needDownload 为false才执行
const previewFile = (uploadFile) => {
    console.log('文件', uploadFile);
};
// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};
</script>

照片墙

设置 list-type="picture-card"，支持的照片宽度有 60px, 90px, 120px，配置相应的类名即可。

<template>
    <ZpUploadFile
        ref="uploadFileRef"
        name="uploadFile"
        id="box8"
        loadingContainer="#box8"
        action="/test/api/quality/common/file/upload"
        :show-file-list="true"
        list-type="picture-card"
        class="img90"
        :limit="3"
    >
        <template #trigger>
            <el-icon><Plus /></el-icon>
        </template>
    </ZpUploadFile>
    <el-button type="primary" @click="getFileList">获取文件列表</el-button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const uploadFileRef = ref();

// 获取接口详情的文件列表
const getDetail = () => {
    setTimeout(() => {
        const files = [
            {
                name: 'img01.jpg',
                url: 'https://t12.baidu.com/it/u=2944858655,3260611328&fm=58',
            },
            {
                name: 'img02.jpg',
                url: 'https://t12.baidu.com/it/u=3165178178,1926556480&fm=58',
            },
        ];
        uploadFileRef.value.fileList = [...files];
    }, 1000);
};
// 获取文件列表
const getFileList = () => {
    const fileList = uploadFileRef.value.fileList.map((item) => ({
        name: item.name,
        url: item.url,
    }));
    console.log('文件列表', fileList);
};

onMounted(() => {
    getDetail();
});
</script>

API

Attributes

去掉了 element-plus 中的 file-list 属性, 如果需要回显文件列表，请使用 ref 的方式，详见上方 回显文件列表-ref 的示例。

属性名	说明	类型	默认值
headersTokenKey	上传时请求头部 `token` 的 `key` 键名	`string`	Authorization
cookiesTokenKey	上传时请求头部 `token` 的值取至`Cookies`中的字段	`string`	token
loadingContainer	加载动画的容器	`class`/`id`	#uploadFileContainer
needDownload	点击文件列表中的文件，是否下载文件	`boolean`	false
maxSize	上传文件大小限制	`number`	-
maxSizeList	根据文件类型分别设置上传文件大小限制	`maxSizeItem[]`	[]
singleDrag	拖拽上传时，只能上传一个文件	`boolean`	false
isReUpload	是否覆盖上一次文件，`limit`必须为1	`boolean`	false
resType	接口返回格式	`object`	-
其他属性	继承至 `element-plus` 的 `Upload API`	-	-

resType 属性

1：code=200返回{data:'fileUrl'}，code!=200返回{data:'failExcelFileUrl'}报错并下载
2：code=200返回{data:{fileUrl:'',failExcelFileUrl:'',...}}，failExcelFileUrl有值报错并下载，code!=200仅报错

maxSizeItem

属性名	说明	类型	默认值
types	文件类型	`enum[]`	[]
maxSize	上传文件大小限制	`class`/`id`	-
errTip	报错的提示信息内容	`string`	-

types 枚举

属性名	说明
image	图片
video	视频
audio	音频
application	wps/pdf 文件
text	txt 文本
other	其他文件类型

Events

方法名	说明	类型
onUploadSuccess	文件上传成功	`Function`
onRemoveSuccess	文件移除成功	`Function`
onPreviewFile	预览文件，`needDownload` 为 `false` 时有效	`Function`

Slot

继承至 element-plus 的 Upload 插槽，具体请查看 element-plus 官网。

UploadFile 介绍 ​

基本使用 ​

回显文件列表-ref ​

文件大小限制 ​

复杂的文件大小限制 ​

触发插槽 / Tip插槽 / 默认插槽 ​

单个拖拽上传 ​

覆盖单个上传 ​

照片墙 ​

API ​

Attributes ​

maxSizeItem ​

types 枚举 ​

Events ​

Slot ​