1. 程式人生 > 實用技巧 >element ui上傳圖片限制尺寸(寬、高、)大小、格式等

element ui上傳圖片限制尺寸(寬、高、)大小、格式等

<el-upload
           class="upload-demo"
           :action="uploadLi"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :headers="{'X-User-Token': authorization}"
             name="file"
             accept="image/png,image/jpg,image/jpeg,image/gif"
             :multiple
=false :show-file-list=false > <div class="avatar" v-if="createForm.advertPic"> <img :src="createForm.advertPic" class="avatar_img"> <span>修改圖示</span> </div> <el-button size="small" type="primary" style="height:28px;" v-else
>上傳</el-button> <div slot="tip" class="el-upload__tip" style="margin-top:0px;">只能上傳jpg/png/gif檔案 750*1642px,1M以內</div> </el-upload> //js 方法: beforeUpload (file) { //進行圖片型別和大小的限制 var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension
= testmsg === 'png' const extension2 = testmsg === 'jpg' const extension3 = testmsg === 'jpeg' const extension4 = testmsg === 'gif' const isLt2M = file.size / 1024 / 1024 < 1 //const isLt2M = file.size / 1024 <= 500 if(!extension && !extension2 && !extension3 && !extension4) { this.$message({ message: '展會廣告圖只能是 png、jpg、jpeg、gif格式!', type: 'warning' }); return false;//必須加上return false; 才能阻止 } if(!isLt2M) { this.$message({ message:'展會廣告圖大小不能超過1M!請重新選擇!', type: 'warning' }); return false;//必須加上return false; 才能阻止 } const isSize = new Promise(function(resolve, reject){ let width = 750; let height = 1642; let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = function(){ let valid = img.width == width && img.height == height; valid ? resolve() : reject(); } img.src = _URL.createObjectURL(file); }).then(()=>{ return file; }, ()=>{ this.$message({ message:'展會廣告圖尺寸只能是750*1642px!請重新選擇!', type: 'warning' }); return Promise.reject() return false;//必須加上return false; 才能阻止 }) return extension || extension2 || extension3 || extension4 && isLt2M && isSize; },