<template> <el-card class="box-card"> <h2 style="margin-bottom: 20px;">element-ui上传图片</h2> <el-upload action="#" list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i> <div slot="file" slot-scope="{file}" class="elupload"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> <span class="el-upload-list__item-actions"> <!-- 放大图片 --> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <i class="el-icon-zoom-in"></i> </span> <!-- 下载图片 --> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> <i class="el-icon-download"></i> </span> <!-- 删除图片 --> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> <el-dialog :visible.sync="dialogVisible" width="500px"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-card> </template> <script> export default { data() { return { dialogImageUrl: '', dialogVisible: false, disabled: false }; }, methods: { //放大图片 handlePictureCardPreview(file) { console.log('放大图片', file); this.dialogImageUrl = file.url; this.dialogVisible = true; }, //下载图片 handleDownload(file) { console.log('下载图片', file); }, //删除图片 handleRemove(file) { console.log('删除图片', file); this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', center: true }).then(() => { this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); } } } </script> <style> /* 图片充满整个区域 */ .el-upload-list--picture-card .el-upload-list__item-thumbnail { width: 146px; height: 146px; } </style>
element-ui上传图片
最新推荐文章于 2024-03-20 11:20:05 发布