cube-ui限制图片上传类型以及上传大小

最新推荐文章于 2024-06-28 10:53:21 发布

HongHamster

最新推荐文章于 2024-06-28 10:53:21 发布

阅读量438

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/honghamster/article/details/127717658

版权

本文详细介绍了如何在使用cube-ui库进行前端开发时，设置图片上传的类型过滤和大小限制，确保用户只能上传指定类型的图片，并且文件大小不超过设定阈值。通过JavaScript实现这一功能，增强用户体验并有效防止服务器存储负担。

摘要由CSDN通过智能技术生成

/移动端
<cube-upload
    ....
    @files-add="addedHandler"
    ....>
    
    methods:{
        addHandler(files){
            //限制图片大小最大为7M
            const maxSize = 7*1024*1024
            for(let k in files){
                if(files.hasOwnProperty(k)){
                    const file = files[k]
                    if(file.size > maxSize){
                        file.ignore = true
                        this.createToast({
                            type:'error',
                            time: 2000,
                            txt: '上传图片超过7M上限'
                        }).show()
                        return
                    }
                    //获取图片类型名
                    let img = file.name.substring(file.name.lastIndexOf('.')+1)
                    if(!['jpg','jpeg','png'].includes(img)){
                        file.ignore = true