Vue和Element怎么自定义上传封面组件功能
导读：本文共2390.5字符，通常情况下阅读需要8分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 先来看一下效果：第一张图片是上传之前，第二张图片是上传成功后，第3张图片是鼠标放上去之后的效果！首先整理需求，图片上传我们使用照片墙的方式，只能上传一张图片，图片上传成功后不能继续上传，如果想要更换图片，则需要将图片删除后重新上传。点击图片上面的放大镜可以查看大图。需要限制图片上传的格式，图片的大小。组件代码：<template><divcl... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。先来看一下效果：
第一张图片是上传之前，第二张图片是上传成功后，第3张图片是鼠标放上去之后的效果！首先整理需求，图片上传我们使用照片墙的方式，只能上传一张图片，图片上传成功后不能继续上传，如果想要更换图片，则需要将图片删除后重新上传。点击图片上面的放大镜可以查看大图。需要限制图片上传的格式，图片的大小。组件代码：
<template><divclass="upload"><el-upload:class="{'hidden':mFileList.length>0}"list-type="picture-card":on-remove="handleRemove":action="action":before-upload="beforeUploadHandle":on-success="successHandle":on-change="changeHandle":limit="1":accept="accept":on-exceed="handleExceed":file-list="fileList":on-preview="handlePictureCardPreview"><iclass="el-icon-plus"></i></el-upload><el-dialog:visible.sync="dialogVisible"><imgwidth="100%":src="dialogImageUrl"alt=""/></el-dialog></div></template><script>exportdefault{props:{action:{type:String,default:"",},accept:{type:String,default:"",},fileList:{type:Array,default:()=>[],},},watch:{fileList(newValue,oldValue){this.mFileList=newValue}},data(){return{dialogVisible:false,//图片放大fileImg:"",//上传图片dialogImageUrl:"",//图片地址mFileList:this.fileList,};},methods:{handleRemove(file,fileList){this.$emit("upload-remove",file);},handlePictureCardPreview(file){this.dialogImageUrl=file.url;this.dialogVisible=true;},//上传之前beforeUploadHandle(file){if(file.type!=="image/jpeg"&&file.type!=="image/png"){this.$message({message:"只支持jpg、png格式的图片！",type:"warning",});returnfalse;}constisLt2M=file.size/1024/1024<2;if(!isLt2M){this.$message({message:"上传文件大小不能超过2MB!",type:"warning",});returnfalse;}},//上传成功successHandle(response,file,fileList){this.mFileList=fileList;if(response&&response.code===200){this.$message.success("图片上传成功！");this.$emit("upload-success",response,file);}else{this.$message.error(response.msg);}},changeHandle(file,fileList){if(file.response&&file.response.code==500){this.$emit("upload-error",file);}},handleExceed(files,fileList){this.$message.warning("只能上传1张图片！");},},};</script><stylelang="scss">.upload.hidden.el-upload--picture-card{display:none;}</style>调用组件代码：
<template><div><el-formref="dataForm"label-width="80px"><el-form-itemlabel="封面"prop="cover"class="is-required"><uploadlist-type="picture-card":action="url":accept="'.jpg,.png,.JPG,.PNG'":fileList="fileList":limit="1"@upload-success="uploadFile"@upload-remove="removeFile"@upload-error="uploadError"></upload></el-form-item></el-form></div></template><script>importUploadfrom'../components/cover-upload/index.vue'exportdefault{components:{Upload},data(){return{url:"",fileList:[],}},methods:{uploadUrl(){this.url="http://xxx.xxx.xxx.xxx:xxx/yyxt/admin/course/courseInfo/upload?token=075de0303b15a38833a30a7a3b494794"//上传图片的后台接口},uploadError(file){this.fileList=[];},uploadFile(response,file){this.fileList=[{url:response.data,},];},removeFile(file){this.fileList=[];},},mounted(){this.uploadUrl();}}</script> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
Vue和Element怎么自定义上传封面组件功能的详细内容，希望对您有所帮助，信息来源于网络。