mszc
mszc
28天前 · 4 人阅读
为了不再重复的上传文件,做了一个统一选择文件和上传文件的

基于 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...

代码仓库:

收藏 0
关键词: vue.js php html5 css node.js
评论