基于element UI 的上传插件

为了不再重复的上传文件，做了一个统一选择文件和上传文件的

基于 element UI ：http://element-cn.eleme.io
前端实现文件下载和拖拽上传

演示

用法

<upload-file
    :uploadUrl="http://com/upload"
    :isAll="true"
    :fileExt="fileExt"
    :size="200000"
    :limit="6"
    @uploadFileSelectAll="uploadImageSelect">
</upload-file>

Attributes

• uploadUrl 上传地址
• isAll 是否可以多选
• fileExt 允许选择的文件后缀（也是允许上传的文件后缀）
• size 上传的文件大小
• limit 每页显示多少

Events

• uploadFileSelectAll 选择文件时的事件（如果是多选模式，则就是多选后点击确定按钮的事件）参数为 选择的文件列表

体验地址：https://lmxdawn.github.io/vue... 账号和密码 随便填

<template>
    <div>
        <el-button type="text" @click="dialogVisible = true">点击打开 上传插件</el-button>
        <el-dialog
            title="上传插件"
            :visible.sync="dialogVisible"
            width="80%">
            <upload-file
                :uploadUrl="uploadUrl"
                :isAll="true"
                :fileExt="fileExt"
                :size="200000"
                :limit="6"
                @uploadFileSelectAll="uploadImageSelect">
            </upload-file>
        </el-dialog>
    </div>

</template>

<script>
    import UploadFile from '../../components/common/UploadFile.vue'
    import { baseUrl } from '../../../config/env'
    export default {
        data () {
            return {
                uploadUrl: baseUrl + '/admin/upload/newFile',
                fileExt: 'jpg,png,gif',
                dialogVisible: false
            }
        },
        components: {
            UploadFile
        },
        methods: {
            uploadImageSelect (item) {
                console.log(item)
            },
            handleClose (done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done()
                    })
                    .catch(_ => {})
            }
        },
        mounted () {
        }
    }
</script>

<style lang="scss">

</style>

最后

相关文章： https://segmentfault.com/a/11...

代码仓库：

• HTML：https://github.com/lmxdawn/vu...
• PHP： https://github.com/lmxdawn/vu...
• 插件代码： https://github.com/lmxdawn/vu...

原文地址：https://segmentfault.com/a/1190000015028800