Vue + Element 自定义上传封面组件

  • Vue + Element 自定义上传封面组件已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果:

前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果:

Vue + Element 自定义上传封面组件             Vue + Element 自定义上传封面组件         Vue + Element 自定义上传封面组件
第一张图片是上传之前,第二张图片是上传成功后,第3张图片是鼠标放上去之后的效果!
 
首先整理需求,图片上传我们使用照片墙的方式,只能上传一张图片,图片上传成功后不能继续上传,如果想要更换图片,则需要将图片删除后重新上传。点击图片上面的放大镜可以查看大图。
需要限制图片上传的格式,图片的大小。
 
组件代码:
  1 <template>   2   <div class="upload">   3     <el-upload   4       :class="{'hidden':mFileList.length > 0}"   5       list-type="picture-card"   6       :on-remove="handleRemove"   7       :action="action"   8       :before-upload="beforeUploadHandle"   9       :on-success="successHandle"  10       :on-change="changeHandle"  11       :limit="1"  12       :accept="accept"   13       :on-exceed="handleExceed"  14       :file-list="fileList"  15       :on-preview="handlePictureCardPreview"  16     >  17       <i class="el-icon-plus"></i>  18     </el-upload>  19     <el-dialog :visible.sync="dialogVisible">  20       <img width="100%" :src="dialogImageUrl" alt="" />  21     </el-dialog>  22   </div>  23 </template>  24   25 <script>  26 export default {  27   props: {  28     action: {  29       type: String,  30       default: "",  31     },  32     accept: {  33       type: String,  34       default: "",  35     },  36     fileList:{  37       type: Array,  38       default: () => [],  39     },  40   },  41   watch: {  42     fileList(newValue, oldValue) {  43       this.mFileList = newValue  44     }  45   },  46   data() {  47     return {  48       dialogVisible: false, //图片放大  49       fileImg: "", //上传图片  50       dialogImageUrl: "", //图片地址  51       mFileList:this.fileList,  52     };  53   },  54   methods: {  55     handleRemove(file, fileList) {  56       this.$emit("upload-remove", file);  57     },  58     handlePictureCardPreview(file) {  59       this.dialogImageUrl = file.url;  60       this.dialogVisible = true;  61     },  62     // 上传之前  63     beforeUploadHandle(file) {  64       if (file.type !== "image/jpeg" && file.type !== "image/png" alt="Vue + Element 自定义上传封面组件") {  65         this.$message({  66           message: "只支持jpg、png格式的图片!",  67           type: "warning",  68         });  69         return false;  70       }  71       const isLt2M = file.size / 1024 / 1024 < 2;  72       if (!isLt2M) {  73         this.$message({  74           message: "上传文件大小不能超过 2MB!",  75           type: "warning",  76         });  77         return false;  78       }  79     },  80     // 上传成功  81     successHandle(response, file, fileList) {  82       this.mFileList = fileList;  83       if (response && response.code === 200) {  84         this.$message.success("图片上传成功!");  85         this.$emit("upload-success", response, file);  86       } else {  87         this.$message.error(response.msg);  88       }  89     },  90     changeHandle(file, fileList) {  91       if(file.response && file.response.code == 500) {  92          this.$emit("upload-error",file);  93       }  94     },  95     handleExceed(files, fileList) {  96         this.$message.warning("只能上传1张图片!");  97       },  98   },  99 }; 100 </script> 101 <style lang="scss"> 102 .upload .hidden .el-upload--picture-card { 103   display: none; 104 } 105 </style>

调用组件代码:

 1 <template>  2     <div>  3         <el-form ref="dataForm"    label-width="80px">  4             <el-form-item label="封面" prop="cover" class="is-required">  5                 <upload list-type="picture-card" :action="url" :accept="'.jpg,.png,.JPG,.PNG'" :fileList="fileList"  6                     :limit="1" @upload-success="uploadFile" @upload-remove="removeFile" @upload-error="uploadError">  7                 </upload>  8             </el-form-item>  9         </el-form> 10     </div> 11 </template> 12  13 <script> 14     import Upload from '../components/cover-upload/index.vue' 15     export default { 16         components: { 17             Upload 18         }, 19         data() { 20             return { 21                 url: "", 22                 fileList: [], 23             } 24         }, 25         methods: { 26             uploadUrl() { 27                 this.url = "http://xxx.xxx.xxx.xxx:xxx/yyxt/admin/course/courseInfo/upload?token=075de0303b15a38833a30a7a3b494794"//上传图片的后台接口 28             }, 29             uploadError(file) { 30                 this.fileList = []; 31             }, 32             uploadFile(response, file) { 33                 this.fileList = [{ 34                     url: response.data, 35                 }, ]; 36             }, 37             removeFile(file) { 38                 this.fileList = []; 39             }, 40         }, 41         mounted() { 42             this.uploadUrl(); 43         } 44     } 45 </script>

点击上传后的图片上的放大镜,显示图片大图

Vue + Element 自定义上传封面组件