1. 程式人生 > >關於Element上傳圖片元件el-upload的使用以及校驗

關於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('上傳失敗')
	        },