zoukankan      html  css  js  c++  java
  • vue中使用elupload上传图片限制图片格式和大小

    <el-upload
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :data="uploadToken"
    class="avatar-uploader"
    accept=".jpg,.jpeg,.png"
    action="https://upload.qiniup.com">
    <!-- http://up.qiniup.com -->
    <img
    v-if="form.avatar"
    :src="form.avatar"
    class="avatar">
    <img
    v-else
    src="~/assets/images/user-logo.png"
    class="avatar">
    </el-upload>
    使用accept,同时要加以格式判断

    beforeAvatarUpload(file) {
    console.log('file', file)
    let types = ['image/jpeg', 'image/jpg', 'image/png'];
    const isImage = types.includes(file.type);
    if (!isImage) {
    this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
    }else{
    this.uploadToken.key=`upload_pic_${Date.parse(new Date())}${file.name}`
    }
    },
    const isLtSize = file.size / 1024 / 1024 < 5;
    if (!isLtSize) {
    this.$message.error('上传图片大小不能超过 5MB!');
    }
    ————————————————
    版权声明:本文为CSDN博主「踏寒」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/zh_chong/article/details/106759166

  • 相关阅读:
    4-1 软件原型设计
    3-1 案例分析
    2-1 编程作业
    1-2阅读任务
    1-1 准备工作
    第十周学习总结
    实验报告2&&第四周课程总结
    Java实验报告(一)&&第三周学习总结
    第三周编程总结
    2019年春季学期第二周作业
  • 原文地址:https://www.cnblogs.com/javalinux/p/15632876.html
Copyright © 2011-2022 走看看