yuebeilian-admin/src/components/common/upImg.vue

<template>
    <div class="upImg">
        <el-upload
                :action=action
                list-type="picture-card"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :limit="limit"
                :multiple=multiple
                :on-success="upSuccess"
                :on-exceed="exceedImg"
                :on-error="fallUp">
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'upImg',
        data() {
            return {
                limit: 5, // 最多上传5张
                multiple: true,
                action: 'https://jsonplaceholder.typicode.com/posts/',
                fileList: [
                    {
                        name: 'food.jpeg',
                        url: this.$Public.mainImg
                    },
                    {
                        name: 'food.jpeg',
                        url: this.$Public.mainImg
                    }]
            };
        },
        computed: {
            addShow() {
                return this.fileList.length <= 0;
            }
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            exceedImg() {
                // 超出
                this.$message.error('主图超出预算啦');
            },
            upSuccess(response, file, fileList) {
                // 图片上传成功将图片传入数组
                this.fileList.concat(fileList);
            },
            fallUp(err, file, fileList) {
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .upImg {
        width: 100%
    }
</style>