<template>
    <div class="content">
        <e-row :gutter="24">
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>点击上传</span>
                    </div>
                    <div>
                        <e-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="3"
                            :on-exceed="handleExceed"
                            :file-list="fileList">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </e-upload>
                    </div>
                </e-card>
            </e-col>
            <!-- 用户头像上传 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>用户头像上传</span>
                    </div>
                    <div>
                        <e-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </e-upload>
                    </div>
                </e-card>
            </e-col>
            <!-- 照片墙 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>照片墙</span>
                    </div>
                    <div>
                        <e-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                            </e-upload>
                            <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </e-card>
            </e-col>
            <!-- 文件缩略图 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>文件缩略图</span>
                    </div>
                    <div>
                        <e-upload
                            action="#"
                            list-type="picture-card"
                            :auto-upload="false">
                                <i slot="default" class="el-icon-plus"></i>
                                <div slot="file" slot-scope="{file}">
                                <img
                                    class="e-upload-list__item-thumbnail"
                                    :src="file.url" alt=""
                                >
                                <span class="e-upload-list__item-actions">
                                    <span
                                    class="e-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                    >
                                    <i class="el-icon-zoom-in"></i>
                                    </span>
                                    <span
                                    v-if="!disabled"
                                    class="e-upload-list__item-delete"
                                    @click="handleDownload(file)"
                                    >
                                    <i class="el-icon-download"></i>
                                    </span>
                                    <span
                                    v-if="!disabled"
                                    class="e-upload-list__item-delete"
                                    @click="handleRemove(file)"
                                    >
                                    <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                                </div>
                            </e-upload>
                            <el-dialog :visible.sync="dialogVisible1">
                            <img width="100%" :src="dialogImageUrl1" alt="">
                            </el-dialog>
                    </div>
                </e-card>
            </e-col>
            <!-- 图片列表缩略图 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>图片列表缩略图</span>
                    </div>
                    <div>
                        <e-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </e-upload>
                    </div>
                </e-card>
            </e-col>
            <!-- 上传文件列表控制 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>上传文件列表控制</span>
                    </div>
                    <div>
                        <e-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-change="handleChange"
                            :file-list="fileList1">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </e-upload>
                    </div>
                </e-card>
            </e-col>
            <!-- 拖拽上传 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>拖拽上传</span>
                    </div>
                    <div>
                        <e-upload
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            multiple>
                            <i class="el-icon-upload"></i>
                            <div class="e-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="e-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </e-upload>
                    </div>
                </e-card>
            </e-col>
            <!-- 手动上传 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always">
                    <div slot="header" class="clearfix">
                        <span>手动上传</span>
                    </div>
                    <div>
                        <e-upload
                            class="upload-demo"
                            ref="upload"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="e-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </e-upload>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
            imageUrl: '',
            dialogImageUrl: '',
            dialogVisible: false,
            dialogImageUrl1: '',
            dialogVisible1: false,
            disabled: false,
            fileList1: [{
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                name: 'food2.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }]
        
        }
    },
    mounted() {
    },
    methods: {
        submitUpload() {
        this.$refs.upload.submit();
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}
.content {
    height: 100%;
    padding: 30px;
    background:#fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col{
    margin-bottom:10px;
}

.avatar-uploader .e-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .e-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
