zoukankan      html  css  js  c++  java
  • el-upload--》 当action为空时,如何实现上传功能?

      //结构 
      <img :src="imgLogo" class="logoImg fl" style="margin:0 10px;" /> <el-upload style=" 220px" ref="newupload" class="logo-uploader fl" action="#" :show-file-list="false" :before-upload="beforeLogoImgUpload" :http-request="httpRequestLogo"> <el-button slot="trigger" size="small" icon="el-icon-upload" style=" 115px;">选择Logo </el-button> <div slot="tip" class="el-upload__tip"> <p>只能上传jpg/png/gif文件,且不超过2MB</p> <p>建议上传图片尺寸为80*60</p> </div> </el-upload>

      

       //方法
      beforeLogoImgUpload(file) {
    const isJPG = file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error("上传企业Logo图片只能是 JPG/PNG/GIF 格式!"); return isJPG; } if (!isLt2M) { this.$message.error("上传企业Logo图片大小不能超过 2MB!"); return isLt2M; } this.multfileLogoImg = file; return isJPG && isLt2M; }, httpRequestLogo(data) { let _this = this; let rd = new FileReader(); // 创建文件读取对象 this.logoFile = data.file; //传递给后端的参数 rd.readAsDataURL(this.logoFile); // 文件读取装换为base64类型 rd.onloadend = function(e) { _this.imgLogo = rd.result; // 图片回显 _this.fd = new FormData(); _this.fd.append("token", _this.token); //传其他参数 _this.fd.append("file", _this.logoFile); //传其他参数 api_bcs.saveFileUrl(_this.fd).then(res => { if (res) { _this.delLogoList.push(res.data); _this.imgLogoParm = res.data; _this.$message({ showClose: true, type: "success", message: "设置成功" }); store.commit("UPDATE_SYSHEADER", _this.imgLogo); //企业logo } }); }; },
  • 相关阅读:
    多种方式实现数组的扁平化处理
    利用node中的内置模块fs实现对简单文件的读取 拷贝 创建等功能
    浅谈es5和es6中的继承
    js之冒泡排序与快速排序
    IE5,IE6,IE7,IE8的css兼容性列表[转自MSDN]
    css3 动画
    各种浏览器css hack
    解决li在ie,firefox中行高不一致问题
    Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
    png-24在ie6中的几种透明方法
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/13306251.html
Copyright © 2011-2022 走看看