• ElementUI浅尝辄止38：Upload 上传

    通过点击或者拖拽上传文件实现上传功能，常见于文件、文件夹或图片上传，使用挺频繁的。需要熟练掌握

    1.如何使用？点击上传

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

    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文件，且不超过500kbdiv>
    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>

    2.用户头像上传

    使用 before-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>
    10.  
    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>
    36.  
    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;
    51.  
    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>

    3.照片墙

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

    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>
    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>

    4.文件缩略图

    使用 scoped-slot 去设置缩略图模版。

    2.   action="#"
    3.   list-type="picture-card"
    4.   :auto-upload="false">
    5.     <i slot="default" class="el-icon-plus">i>
    6.     <div slot="file" slot-scope="{file}">
    7.       <img
    8.         class="el-upload-list__item-thumbnail"
    9.         :src="file.url" alt=""
    10.       >
    11.       <span class="el-upload-list__item-actions">
    12.         <span
    13.           class="el-upload-list__item-preview"
    14.           @click="handlePictureCardPreview(file)"
    15.         >
    16.           <i class="el-icon-zoom-in">i>
    17.         span>
    18.         <span
    19.           v-if="!disabled"
    20.           class="el-upload-list__item-delete"
    21.           @click="handleDownload(file)"
    22.         >
    23.           <i class="el-icon-download">i>
    24.         span>
    25.         <span
    26.           v-if="!disabled"
    27.           class="el-upload-list__item-delete"
    28.           @click="handleRemove(file)"
    29.         >
    30.           <i class="el-icon-delete">i>
    31.         span>
    32.       span>
    33.     div>
    34. el-upload>
    35. <el-dialog :visible.sync="dialogVisible">
    36.   <img width="100%" :src="dialogImageUrl" alt="">
    37. el-dialog>
    38. <script>
    39.   export default {
    40.     data() {
    41.       return {
    42.         dialogImageUrl: '',
    43.         dialogVisible: false,
    44.         disabled: false
    45.       };
    46.     },
    47.     methods: {
    48.       handleRemove(file) {
    49.         console.log(file);
    50.       },
    51.       handlePictureCardPreview(file) {
    52.         this.dialogImageUrl = file.url;
    53.         this.dialogVisible = true;
    54.       },
    55.       handleDownload(file) {
    56.         console.log(file);
    57.       }
    58.     }
    59.   }
    60. script>

    5.图片列表缩略图

    2.   class="upload-demo"
    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文件，且不超过500kbdiv>
    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>

    6.上传文件列表控制

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

    2.   class="upload-demo"
    3.   action="https://jsonplaceholder.typicode.com/posts/"
    4.   :on-change="handleChange"
    5.   :file-list="fileList">
    6.   <el-button size="small" type="primary">点击上传el-button>
    7.   <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kbdiv>
    9. <script>
    10.   export default {
    11.     data() {
    12.       return {
    13.         fileList: [{
    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.fileList = fileList.slice(-3);
    25.       }
    26.     }
    27.   }
    28. script>

    7.拖拽上传

    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文件，且不超过500kbdiv>

    8.手动上传

    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文件，且不超过500kbdiv>
    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>

    关于上传组件的大致内容就是这些，需要继续深入浅出的，可前往上传组件

  • 相关阅读:
    SpringCloud：注册中心nacos
    【机器学习笔记15】多分类混淆矩阵、F1-score指标详解与代码实现（含数据）
    metaRTC新增SRS的WebRTC over TCP和turn的TCP支持
    一道 python 数据分析的题目
    ARMday04（开发版简介、LED点灯）
    自研多模态追踪算法 PICO 为「手柄小型化」找到新思路
    01_面向对象高级_static
    VLAN相关知识点
    远程仓库.github/workflow的 yml如何配置
    基于Advisor实现AOP
  • 原文地址：https://blog.csdn.net/W2457307263/article/details/132765331