标签:length 属性 == fileread 照片墙 png size 需求 list
<el-upload
action="#"
ref="upload"
list-type="picture-card" //照片墙的样式
:on-change="handleChange"
:http-request="httpRequest" :before-upload="beforeAvatarUpload"> <i class="el-icon-plus"></i> </el-upload>
注:不使用action属性就设置为#,然后自定义上传http-request,element文档里有。action属性不能去掉
根据个人需求,我这里只要一张,每次选择就会把前一张删除
handleChange(file, fileList) { if (fileList.length > 1) { fileList.shift() } },
这里也可以对上传的图片做一些限制
beforeAvatarUpload(file) { const isImg = file.size / 1024 / 1024 < 2 if (!isImg) { this.$message.error(‘上传头像图片大小不能超过 2MB!‘) } const isType = file.type === "image/png" const isType2 = file.type === "image/jpeg" if (!isType && !isType2) { this.$message.error(‘上传头像图片格式为png或jpg‘) } return (isType || isType2) && isImg },
然后就是自定义的上传方法
httpRequest(data) { let _this = this // 这里要转一下是因为在下面的function里 this的指向发生了变化 let rd = new FileReader() let file = data.file rd.readAsDataURL(file) rd.onloadend = function(e) { _this.addData.icon = this.result } },
(_this.addData.icon 是新增的时候图片的参数字段,this.result就是选中的图片转成的base64)
最后清空el-upload
this.$refs.upload.clearFiles();
标签:length 属性 == fileread 照片墙 png size 需求 list
原文地址:https://www.cnblogs.com/reround/p/12937941.html