qmx_page_admin/src/components/uploadFile.vue

<template>
    <div class="upload-file">
        <Input type="text" v-model="payHtml" :placeholder="placeholdered" readonly></Input>
        <Input type="text" v-model="validateVar" style="display:none"></Input>
        <Upload 
            :multiple="multipled"
            action="/filemanage/upload"
            :before-upload="beforeImgFile"
            :on-success="handleSuccess"
            :on-exceeded-size="handleExceeded"
            :on-error="handleError"
            :show-upload-list="false"
            :accept="accepted"
            :format="formated"
            :on-format-error="formatError"
            name="transferAccounts"
            :data="uploadData"
            :max-size="15120"
            class="pay-load"
        >
            <Button class="find-btn">浏览</Button>
        </Upload>
        <Spin fix style="height:36px" v-if="uploadShow">
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        </Spin>
    </div>
</template>
<script>
    export default {
        name: "uploadFile",
        props: {
            placeholdered: String,
            accepted: String,
            formated: Array,
            multipled: Boolean,
            validateVar: String
        },
        data() {
            return {
                uploadShow: false,
                payHtml: '',
                uploadData: {
                    type: 'transferAccounts'
                }
            }
        },
        methods: {
            beforeImgFile() {// 上传合同
                this.uploadShow = true
            },
            handleSuccess(res, file) {// 文件上传成功
                this.uploadShow = false
                this.$Notice.success({title: '上传成功'})
                this.payHtml = file.name
                this.$emit('fileData', file.response.url)
            },
            handleError() {// 文件上传失败
                this.$Notice.error({title: '上传失败'})
            },
            handleExceeded() {// 文件超出指定大小限制
                this.$Notice.warning({title: '上传文件内存应小于14M'})
            },
            formatError() {// 文件格式验证失败
                this.$Notice.warning({
                    title: '上传文件格式错误',
                    desc: '格式支持',
                    render: h => {
                        return h('span', [
                            '格式仅支持：',
                            h('p', this.accepted)
                        ])
                    }
                })
            }
        },
    }
</script>