首页 > Web开发 > 详细

el-upload--》 当action为空时,如何实现上传功能?

时间:2020-07-15 20:01:57      阅读:169      评论:0      收藏:0      [点我收藏+]
  //结构 
  <img :src="imgLogo" class="logoImg fl" style="margin:0 10px;" /> <el-upload style="width: 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="width: 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 } }); }; },

 

el-upload--》 当action为空时,如何实现上传功能?

原文:https://www.cnblogs.com/wangqi2019/p/13306251.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!