Vue + Element 自定义上传封面组件
前一段时间做项目，频繁使用到上传图片组件，而且只上传一个封面，于是想着自定义一个图片封面上传组件。先来看一下效果：
第一张图片是上传之前，第二张图片是上传成功后，第3张图片是鼠标放上去之后的效果！
首先整理需求，图片上传我们使用照片墙的方式，只能上传一张图片，图片上传成功后不能继续上传，如果想要更换图片，则需要将图片删除后重新上传。点击图片上面的放大镜可以查看大图。
需要限制图片上传的格式，图片的大小。
组件代码：
1 2323 24 25 101upload 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 18 19 20 2221
调用组件代码：
1 2311 12 134 105 96 :limit="1" @upload-success="uploadFile" @upload-remove="removeFile" @upload-error="uploadError"> 7 8
点击上传后的图片上的放大镜，显示图片大图
文章来源于互联网：Vue + Element 自定义上传封面组件
THE END
二维码