el-upload--》 当action为空时,如何实现上传功能?
//结构
<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 } }); }; },