zoukankan      html  css  js  c++  java
  • 使用element中的el-upload获取本地文件并转为base64码实现预览

    页面结构,其中有其他属性需要设置可前往element查看

    <el-upload
         class="avatar-uploader"
          ref="upload"
          action="#"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleChange"
          :on-change="onChange"
          :auto-upload="false"
          :data="addList">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" alt>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

    js代码,未定义的数据自行在data中定义

    beforeUpload(){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
      this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onChange(file,fileList){
      var _this = this;
          var event = event || window.event;
          var file = event.target.files[0];
          var reader = new FileReader(); 
          //转base64
          reader.onload = function(e) {
          _this.imageUrl = e.target.result //将图片路径赋值给src
          }
          reader.readAsDataURL(file);
    },
    handleChange(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    css样式,摘自官方文档

    <style>
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    </style>
    博客园:https://www.cnblogs.com/xianquan
    Copyright ©2020 l-coil
    【转载文章务必保留出处和署名,谢谢!】
查看全文
  • 相关阅读:
    推荐一款适合Dynamics 365/Dynamics CRM 2016 使用的弹出窗插件AlertJs
    SSRS 报表开发过程中,除数为0的处理
    [Dynamics 365] 关于Currency的一点随笔
    [Microsoft Dynamics CRM 2016]Invalid Action – The selected action was not valid 错误的诱因及解决方法
    [Dynamics CRM 2016]如何配置多语言显示
    获取经过跳转后的url地址
    Microsoft Dynamics CRM 2013 --针对特定实体,取消保存功能(包含自动保存)
    Microsoft Dynamics CRM 2013 --选项集的多选
    我自己也是找了好久这样的远程打印软件
    QTextStream 读取文件乱码的解决办法
  • 原文地址:https://www.cnblogs.com/xianquan/p/13149789.html
  • Copyright © 2011-2022 走看看