<div class="company-img" :class="{'active' : imageUrl}"> <el-image :src="imageUrl" :preview-src-list="[imageUrl]" style="width:162px;height:60px;"></el-image></div> <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :auto-upload="false" :on-change="uploadChange" :limit="limitNum" ref="upload"> <div class="click-upload"> <img src="@/assets/images/update.png" alt="" style="height:27px;margin-top:15px;margin-left: 19px;"> <p>点击上传</p> </div> </el-upload> data () { return { imageUrl: '', // 图片地址 },async uploadChange (file) { const isPic = file.raw.type === 'image/jpeg' || file.raw.type === 'image/jpg' || file.raw.type === 'image/png'; // 文件不可大于300kb // const isLt300K = file.size / 1024 / 1024 < 0.3; const isLt300K = file.size / 1024 / 2000 <= 1; if (!isPic) { this.$message.error('上传头像图片仅反对 PNG, JPEG, JPG 格局!'); this.$refs.upload.clearFiles(); // 如果文件类型不符 则革除该数据 return; } if (!isLt300K) { this.$message.error('上传头像图片大小不能超过 300kb!'); this.$refs.upload.clearFiles(); return; } // 只能上传一张图片 if (this.$refs.upload.uploadFiles.length > 1) { this.$refs.upload.uploadFiles.pop(); } this.imageUrl = URL.createObjectURL(file.raw); var formData = new FormData(); formData.append('logoFile', file.raw); // 传参 formData.append('tenantId', this.userInfo.frontTenantId); await this.$api.EnterpriseSettingsManagement.updateLogoFile(formData); this.$message.success('信息批改胜利'); }