FileUpload 文件上传

文件上传组件。

基础用法

使用 title 属性来定义 自定义标题。

<template>
    <div>
        <file-upload style="display: inline" accept=".xls,.xlsx">
            <el-button>上传附件</el-button>
        </file-upload>

        <file-upload
            style="display: inline"
            accept="image/*"
            multiple="multiple"
            @import-file="importFile"
        >
            <el-button>上传图片</el-button>
        </file-upload>

        <div>
            <el-image
                v-for="(item, index) in fileList"
                :key="index"
                :src="item"
                :preview-src-list="fileList"
                fit="cover"
                style="width: 100px; height: 100px"
            ></el-image>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FileUploadDemo',
    data() {
        return {
            fileList: []
        }
    },
    methods: {
        importFile(files) {
            this.fileList = Object.values(files).map((blob) =>
                window.URL.createObjectURL(blob)
            )
        }
    }
}
</script>

显示代码

属性

参数	说明	必填	类型	默认值
accept	上传文件类型		string | undefined	—
disabled	是否禁用		boolean	false

事件

事件	说明	类型
importFile	文件上传后触发	(files: any) => void