關於Element上傳圖片元件el-upload的使用以及校驗
阿新 • • 發佈:2018-12-15
這種寫法在多數情況下均可使用
<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('上傳失敗') },