通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。

    用户头像上传

    使用 before-upload 限制用户上传的图片格式和大小。

    1. <el-upload
    2.   class="avatar-uploader"
    3.   action="https://jsonplaceholder.typicode.com/posts/"
    4.   :show-file-list="false"
    5.   :on-success="handleAvatarSuccess"
    6.   :before-upload="beforeAvatarUpload">
    7.   <img v-if="imageUrl" :src="imageUrl" class="avatar">
    8.   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    9. </el-upload>
    11. <style>
    12.   .avatar-uploader .el-upload {
    13.     border: 1px dashed #d9d9d9;
    14.     border-radius: 6px;
    15.     cursor: pointer;
    16.     position: relative;
    17.     overflow: hidden;
    18.   }
    19.   .avatar-uploader .el-upload:hover {
    20.     border-color: #409EFF;
    21.   }
    22.   .avatar-uploader-icon {
    23.     font-size: 28px;
    24.     color: #8c939d;
    25.     width: 178px;
    26.     line-height: 178px;
    27.     text-align: center;
    28.   }
    29.   .avatar {
    31.     height: 178px;
    32.     display: block;
    33.   }
    34. </style>
    36. <script>
    37.   export default {
    38.     data() {
    39.       return {
    40.         imageUrl: ''
    41.       };
    42.     },
    43.     methods: {
    44.       handleAvatarSuccess(res, file) {
    45.         this.imageUrl = URL.createObjectURL(file.raw);
    46.       },
    47.       beforeAvatarUpload(file) {
    48.         const isJPG = file.type === 'image/jpeg';
    49.         const isLt2M = file.size / 1024 / 1024 < 2;
    51.         if (!isJPG) {
    52.           this.$message.error('上传头像图片只能是 JPG 格式!');
    53.         }
    54.         if (!isLt2M) {
    55.           this.$message.error('上传头像图片大小不能超过 2MB!');
    56.         }
    57.         return isJPG && isLt2M;
    58.       }
    59.     }
    60.   }

    照片墙

    使用 list-type 属性来设置文件列表的样式。

    Upload 上传 - 图3

    1. <el-upload
    3.   action="https://jsonplaceholder.typicode.com/posts/"
    4.   :on-preview="handlePreview"
    5.   :on-remove="handleRemove"
    6.   :file-list="fileList"
    7.   list-type="picture">
    8.   <el-button size="small" type="primary">点击上传</el-button>
    9.   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    10. </el-upload>
    11. <script>
    12.   export default {
    13.     data() {
    14.       return {
    15.         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'}]
    16.       };
    17.     },
    18.     methods: {
    19.       handleRemove(file, fileList) {
    20.         console.log(file, fileList);
    21.       },
    22.       handlePreview(file) {
    23.         console.log(file);
    24.       }
    25.     }
    26.   }
    27. </script>

    上传文件列表控制

    Upload 上传 - 图5

    拖拽上传

    1. <el-upload
    2.   class="upload-demo"
    3.   drag
    4.   action="https://jsonplaceholder.typicode.com/posts/"
    5.   multiple>
    6.   <i class="el-icon-upload"></i>
    7.   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

    Upload 上传 - 图7

    Attribute

    Slot