qyjj-admin/src/components/goods/uploadFile.vue

<template>
    <div class="upAppendix">
        <el-upload
            action="string"
            class="upload-demo"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :http-request="upFile"
            :multiple="false"
            :file-list="nFile"
            :accept="acceptType"
        >
            <div class="add-wrap" v-if="!showBtn">
                <p class="add">
                    <i class="el-icon-upload2"></i>点击选择
                </p>
            </div>
        </el-upload>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'singleImg',
        props: {
            file: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            fileType: {
                type: String,
                default: '3'
            },
            acceptType: {
                type: String,
                // default: 'audio/*'
                default: '.m4a,audio/wav,audio/mp3,.aac'
            }
        },
        data() {
            return {
                showBtn: false,
                uploadPercent: '', // 上传进度
                currentFile: {},
                defaultImg: this.$Public.defaultImg,
                nFile: [],
                progress: 0 // 进度条
            };
        },
        created() {},
        methods: {
            beforeRemove(file) {
                console.log('beforeRemove', file);
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            handleRemove(file) {
                this.showBtn = false;
                this.nFile = this.nFile.filter(item => item !== file);
                this.emit();
            },
            emit() {
                let data = {
                    file_url: this.nFile[0].url,
                    url_name: this.nFile[0].name
                };
                this.$emit('getFile', data);
            },
            upFile(param) {
                // 上传
                let file = param.file;
                if (!file) {
                    return;
                }
                this.showBtn = true;
                this.httpUploadImg({ type: this.fileType, file: file }).then(
                    res => {
                        let item = {
                            url: res,
                            name: param.file.name
                        };
                        this.nFile.push(item);
                        console.log('httpUploadImg', this.nFile, res);
                        this.emit();
                    },
                    res => {
                        console.log(2222);
                    }
                );
            }
        },
        watch: {
            file: {
                handler(val) {
                    console.log(22222, val);
                    // if (val.id) {
                    if (val.file_url) {
                        this.nFile = [
                            {
                                url: val.file_url,
                                name: val.url_name
                            }
                        ];
                        this.showBtn = true;
                    }
                    // }
                },
                deep: true,
                immediate: true
            },
            nFile: {
                handler(val) {
                    console.log(333, val);
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    .upAppendix {
        flex-x(flex-start, flex-start);
        margin-top: 5px;

        .add-wrap {
            position: relative;
            width: 100px;
            height: 30px;
            background: white;
            border: 1px solid border-color;
            border-radius(3px);
            flex-center();

            .add {
                color: blue;
            }

            p {
                text-align: center;
                color: gray6;
            }
        }

        input {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    >>>.el-upload {
        display: inherit !important;
    }

    >>>.el-upload-list__item:first-child {
        margin-top: 0 !important;
    }
</style>