<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('信息修改成功');
        }

多喝烫水
5 声望1 粉丝

精通vue,JavaScript,jquery,Angular的拼写