基於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