关于前端:elementui-elupload-上传图片

42次阅读

共计 1303 个字符,预计需要花费 4 分钟才能阅读完成。

<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('信息批改胜利');
        }

正文完
 0