关于Element上传图片组件el-upload的使用以及校验

这种写法在多数情况下均可使用

<el-upload class="avatar-uploader"
	action="/api/upload/ueditorUpload"
	:on-success="uploadSuccess"
	:on-error="uploadError"
	:show-file-list="false"
	:before-upload="beforeAvatarUpload"
	accept="image/jpeg,image/jpg,image/png">
	<img v-if="editData.topicPic" :src="editData.topicPic" class="cover-img"/>
	<i v-else class="el-icon-plus"></i>
</el-upload>

accept="image/jpeg,image/jpg,image/png"

是用来控制上传的图片类型

关于上传图片的检验，我们可以这样写

//      上传照片前的校验
	        beforeAvatarUpload(file) {
	          var testmsg=/^image\/(jpeg|png|jpg)$/.test(file.type)
	          const isLt4M = file.size / 1024/1024 <=4//图片大小不超过2MB
	          if (!testmsg) {
	            this.$message.error('上传图片格式不对!');
	            return
	          }
	          if(!isLt4M) {
	            this.$message.error('上传图片大小不能超过 4M!');
	            return
	          }
	          return testmsg  && isLt4M
	        },
	
//          上传成功
	        uploadSuccess(res,file,fileList){
	          this.editData.topicPic = res;
	          this.$message.success('上传成功')
	        },

//         上传失败
	        uploadError(err,file){
	          this.$message.error('上传失败')
	        },