• Upload 上传
    • 点击上传
    • 用户头像上传
    • 照片墙
    • 图片列表缩略图
    • 上传文件列表控制
    • 拖拽上传
    • 手动上传
    • Attribute
    • Slot
    • Methods

    Upload 上传

    通过点击或者拖拽上传文件

    点击上传

    Upload 上传 - 图1

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

    1. <el-upload
    2.   class="upload-demo"
    3.   action="https://jsonplaceholder.typicode.com/posts/"
    4.   :on-preview="handlePreview"
    5.   :on-remove="handleRemove"
    6.   :before-remove="beforeRemove"
    7.   multiple
    8.   :limit="3"
    9.   :on-exceed="handleExceed"
    10.   :file-list="fileList">
    11.   <el-button size="small" type="primary">点击上传</el-button>
    12.   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    13. </el-upload>
    14. <script>
    15.   export default {
    16.     data() {
    17.       return {
    18.         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'}]
    19.       };
    20.     },
    21.     methods: {
    22.       handleRemove(file, fileList) {
    23.         console.log(file, fileList);
    24.       },
    25.       handlePreview(file) {
    26.         console.log(file);
    27.       },
    28.       handleExceed(files, fileList) {
    29.         this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    30.       },
    31.       beforeRemove(file, fileList) {
    32.         return this.$confirm(`确定移除 ${ file.name }？`);
    33.       }
    34.     }
    35.   }
    36. </script>

    用户头像上传

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

    Upload 上传 - 图2

    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.     height: 178px;
    27.     line-height: 178px;
    28.     text-align: center;
    29.   }
    30.   .avatar {
    31.     width: 178px;
    32.     height: 178px;
    33.     display: block;
    34.   }
    35. </style>
    37. <script>
    38.   export default {
    39.     data() {
    40.       return {
    41.         imageUrl: ''
    42.       };
    43.     },
    44.     methods: {
    45.       handleAvatarSuccess(res, file) {
    46.         this.imageUrl = URL.createObjectURL(file.raw);
    47.       },
    48.       beforeAvatarUpload(file) {
    49.         const isJPG = file.type === 'image/jpeg';
    50.         const isLt2M = file.size / 1024 / 1024 < 2;
    52.         if (!isJPG) {
    53.           this.$message.error('上传头像图片只能是 JPG 格式!');
    54.         }
    55.         if (!isLt2M) {
    56.           this.$message.error('上传头像图片大小不能超过 2MB!');
    57.         }
    58.         return isJPG && isLt2M;
    59.       }
    60.     }
    61.   }
    62. </script>

    显示代码

    照片墙

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

    Upload 上传 - 图3

    1. <el-upload
    2.   action="https://jsonplaceholder.typicode.com/posts/"
    3.   list-type="picture-card"
    4.   :on-preview="handlePictureCardPreview"
    5.   :on-remove="handleRemove">
    6.   <i class="el-icon-plus"></i>
    7. </el-upload>
    8. <el-dialog :visible.sync="dialogVisible">
    9.   <img width="100%" :src="dialogImageUrl" alt="">
    10. </el-dialog>
    11. <script>
    12.   export default {
    13.     data() {
    14.       return {
    15.         dialogImageUrl: '',
    16.         dialogVisible: false
    17.       };
    18.     },
    19.     methods: {
    20.       handleRemove(file, fileList) {
    21.         console.log(file, fileList);
    22.       },
    23.       handlePictureCardPreview(file) {
    24.         this.dialogImageUrl = file.url;
    25.         this.dialogVisible = true;
    26.       }
    27.     }
    28.   }
    29. </script>

    图片列表缩略图

    Upload 上传 - 图4

    1. <el-upload
    2.   class="upload-demo"
    3.   action="https://jsonplaceholder.typicode.com/posts/"
    4.   :on-preview="handlePreview"
    5.   :on-remove="handleRemove"
    6.   :file-list="fileList2"
    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.         fileList2: [{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>

    上传文件列表控制

    通过 on-change 钩子函数来对列表进行控制

    Upload 上传 - 图5

    1. <el-upload
    2.   class="upload-demo"
    3.   action="https://jsonplaceholder.typicode.com/posts/"
    4.   :on-change="handleChange"
    5.   :file-list="fileList3">
    6.   <el-button size="small" type="primary">点击上传</el-button>
    7.   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    8. </el-upload>
    9. <script>
    10.   export default {
    11.     data() {
    12.       return {
    13.         fileList3: [{
    14.           name: 'food.jpeg',
    15.           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
    16.         }, {
    17.           name: 'food2.jpeg',
    18.           url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
    19.         }]
    20.       };
    21.     },
    22.     methods: {
    23.       handleChange(file, fileList) {
    24.         this.fileList3 = fileList.slice(-3);
    25.       }
    26.     }
    27.   }
    28. </script>

    拖拽上传

    Upload 上传 - 图6

    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>
    8.   <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    9. </el-upload>

    手动上传

    Upload 上传 - 图7

    1. <el-upload
    2.   class="upload-demo"
    3.   ref="upload"
    4.   action="https://jsonplaceholder.typicode.com/posts/"
    5.   :on-preview="handlePreview"
    6.   :on-remove="handleRemove"
    7.   :file-list="fileList"
    8.   :auto-upload="false">
    9.   <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    10.   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    11.   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    12. </el-upload>
    13. <script>
    14.   export default {
    15.     data() {
    16.       return {
    17.         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'}]
    18.       };
    19.     },
    20.     methods: {
    21.       submitUpload() {
    22.         this.$refs.upload.submit();
    23.       },
    24.       handleRemove(file, fileList) {
    25.         console.log(file, fileList);
    26.       },
    27.       handlePreview(file) {
    28.         console.log(file);
    29.       }
    30.     }
    31.   }
    32. </script>

    Attribute

    参数 说明 类型 可选值 默认值
    action 必选参数，上传的地址 string — —
    headers 设置上传的请求头部 object — —
    multiple 是否支持多选文件 boolean — —
    data 上传时附带的额外参数 object — —
    name 上传的文件字段名 string — file
    with-credentials 支持发送 cookie 凭证信息 boolean — false
    show-file-list 是否显示已上传文件列表 boolean — true
    drag 是否启用拖拽上传 boolean — false
    accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） string — —
    on-preview 点击文件列表中已上传的文件时的钩子 function(file) — —
    on-remove 文件列表移除文件时的钩子 function(file, fileList) — —
    on-success 文件上传成功时的钩子 function(response, file, fileList) — —
    on-error 文件上传失败时的钩子 function(err, file, fileList) — —
    on-progress 文件上传时的钩子 function(event, file, fileList) — —
    on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList) — —
    before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file) — —
    before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file, fileList) — —
    list-type 文件列表的类型 string text/picture/picture-card text
    auto-upload 是否在选取文件后立即进行上传 boolean — true
    file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array — []
    http-request 覆盖默认的上传行为，可以自定义上传的实现 function — —
    disabled 是否禁用 boolean — false
    limit 最大允许上传个数 number — —
    on-exceed 文件超出个数限制时的钩子 function(files, fileList) — -

    Slot

    name 说明
    trigger 触发文件选择框的内容
    tip 提示说明文字

    Methods

    方法名 说明 参数
    clearFiles 清空已上传的文件列表（该方法不支持在 before-upload 中调用） —
    abort 取消上传请求 （ file: fileList 中的 file 对象 ）

    原文: http://element-cn.eleme.io/#/zh-CN/component/upload