input file 上传文件限制文件大小

<input ref="referenceUpload" id="file" type="file" accept="image/*" class="file" @change="fileChange($event)">

在filechange的函数中就可以拿到事件源 ,更具事件源去拿文件

// 文件上传
fileChange (e) {
    let self = this;
    e.preventDefault();
    var SuffixName = this.GetExtensionFileName(e.target.value);
    if (SuffixName != 'jpg' && SuffixName != 'png' && SuffixName != 'jpeg') {
        Toast({  message: '请上传正确格式的图片',  position: 'bottom',  duration: 3000});
        return;
    };
    this.file = event.target.files[0];
    console.log(event.target.files[0].size);
    if (event.target.files[0].size > 5*1024*1024) { // 此处判断上传文件的大小 , 单位为 b 故要乘以两个1024
        Toast({  message: '图片最大为5兆',  position: 'bottom',  duration: 3000});
        this.$refs.referenceUpload.value = null;
    }
    let formData = new FormData();
    formData.append('prefix', 'createCourseCover');
    formData.append('file', this.file);
    
    this.FetchPost('/media/upload', formData).then(res=> {
        if (res.code == 0) {
            this.form.cover = res.data;
            this.$refs.referenceUpload.value = null;
        } else {
            Toast({  message: res.message,  position: 'bottom',  duration: 3000});
        }
    }).catch(function (error) {
        self.loading = false;
   });
},

在最后附上我的QQ: 2489757828 有问题的话可以找我一同探讨

我的私人博客: 李大玄
我的CSDN: 李大玄

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 得并不怎么踏实。偶尔会皱眉头,颜爱歌看着穆青玄的脸,想起白天的时候这个男人拽着自己的衣摆不放手的情景。胸口有点闷。...
    3gz9xKw7阅读 2,347评论 0赞 0
  • 我想把世界上最好的都给你,却发现世界上最好的就是你。 咱们使用 进行文件上传的时候,免不了需要判断文件上传类型,也...
    魔仙堡杠把子灬阅读 2,067评论 0赞 1
  • 西,给我看看。” 反正他们两个就算是连手,也不一定打得过这个老头,要是挂了,身上有再多宝贝有什么用啊。 所...
    82E4IA32阅读 8,021评论 0赞 0
  • 查理妈妈强烈反对,不同意翻转式自学为主,我的这些想法都不认可,一个学期也不行,让查理在学校学到哪里算哪里,实在不行...
    失落的一角meets大圆满阅读 128评论 0赞 0
  • 阿财咒骂道:“他娘的晦气,一出门就见条癞子狗,麻的财气都给冲散了,嗬呸”,话音刚落,一口黄的带着馊味的口水就轻飘飘...
    鲸语小岛阅读 231评论 0赞 1

友情链接更多精彩内容