vue 上传图片限制大小和格式
                                                            生活随笔
收集整理的這篇文章主要介紹了
                                vue 上传图片限制大小和格式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.                        
                                
                            
                            
                            <div class="upload-box clear"><span class="fl">上傳圖片</span><div class="artistDet-logo-box fl"><el-upload :action="this.baseServerUrl+'/fileUpload/uploadPic?filepath=artwork'" list-type="picture-card" :class="{disabled:uploadMainDisabled}"
:file-list="imagelist" :on-preview="handlePictureMainPreview" :on-remove="handleMainRemove" :on-success="handleMainSuccess" :beforeUpload="beforeAvatarUpload">
</el-upload><el-dialog :visible.sync="dialogMainVisible" ><img width="100%" :src="dialogMainImageUrl" alt=""></el-dialog></div> </div>
beforeAvatarUpload(file) { var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'jpg' const extension2 = testmsg === 'png' const isLt2M = file.size / 1024 / 1024 < 10 if(!extension && !extension2) { this.$message({ message: '上傳文件只能是 jpg、png格式!', type: 'warning' }); } if(!isLt2M) { this.$message({ message: '上傳文件大小不能超過 10MB!', type: 'warning' }); } return extension || extension2 && isLt2M } , 將beforeAvatarUpload加到methods里面
                        
                        
                        :file-list="imagelist" :on-preview="handlePictureMainPreview" :on-remove="handleMainRemove" :on-success="handleMainSuccess" :beforeUpload="beforeAvatarUpload">
</el-upload><el-dialog :visible.sync="dialogMainVisible" ><img width="100%" :src="dialogMainImageUrl" alt=""></el-dialog></div> </div>
beforeAvatarUpload(file) { var testmsg=file.name.substring(file.name.lastIndexOf('.')+1) const extension = testmsg === 'jpg' const extension2 = testmsg === 'png' const isLt2M = file.size / 1024 / 1024 < 10 if(!extension && !extension2) { this.$message({ message: '上傳文件只能是 jpg、png格式!', type: 'warning' }); } if(!isLt2M) { this.$message({ message: '上傳文件大小不能超過 10MB!', type: 'warning' }); } return extension || extension2 && isLt2M } , 將beforeAvatarUpload加到methods里面
轉載于:https://www.cnblogs.com/ymdzha/p/9224933.html
總結
以上是生活随笔為你收集整理的vue 上传图片限制大小和格式的全部內容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: 终末阵线伊诺贝塔贝阿特丽怎么样?
- 下一篇: OO期末总结
