使用el-upload上传图片

使用el-upload上传图片

🐷使用场景： el-upload的组件上传图片的时候参数有局限，使用:http-request来自定义上传参数

❔第一个el-form-item里面的el-input为什么写了又show="false"
回答：验证作用，如果没上传图片，提示用户

html:
        <el-form-item label="图标预览"
                          prop="iconUrl">
                <el-input v-show="false"
                          v-model="formData.iconUrl"></el-input>
                <div class="image-wrapper">
                    <img :src="formData.iconUrl">
                </div>
        </el-form-item>
        <el-form-item label="">
                <div class="select-icon__wrapper">
                    <el-button type="primary"
                               :disabled="disabledBtn"
                               @click="defaultIconVisible = true">
                        选择默认图标
                    </el-button>
                    <el-upload
                        class="avatar-uploader"
                        action=""
                        :http-request="uploadFun"
                        :show-file-list="false"
                        :before-upload="logoBeforeUpload">
                        <el-button :disabled="disabledBtn">
                            上传图标
                        </el-button>
                    </el-upload>

                    <p class="tip">
                        <span>大小：500KB以下</span>
                        <span>格式：jpg、png</span>
                    </p>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           :disabled="disabledBtn"
                           :loading="loading"
                           @click="submitForm">
                    提交
                </el-button>
            </el-form-item>

css: 
.log-container {
    display: flex;
    flex-direction: column;

    .logo-wrapper {
        display: flex;
        overflow: hidden;
        box-sizing: content-box;
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 4px;
        width: 120px;
        height: 120px;
        align-items: center;
        justify-content: center;

        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .upload-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 10px;

        .tip {
            position: absolute;
            bottom: 50px;
            left: 130px;
            margin-top: 16px;
            width: 170px;
            font-size: 12px;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);

            span {
                display: block;
                margin-bottom: 2px;
                line-height: 20px;
            }
        }

        .btn-position {
            margin-top: 9px;

            .requiredImg {
                padding-right: 4px;
                color: #df3a25;
            }
        }
    }
}

js:
 uploadFun(param) {
            this.disabledBtn = true;
            let file = param.file;
            let iconSuffix = '.' + file.name.split('.')[1];
            let data = new FormData(); //创建form对象
            data.append('icon', param.file);
            this.upload_product_icon({ icon: data, iconSuffix: iconSuffix }).then(res => {
                this.formData.iconUrl = res;
            }).finally(() => {
                this.disabledBtn = false;
            });
        },
        logoBeforeUpload(file) {
            let _this = this;
            let acceptTypes = [
                '.jpeg',
                '.png',
                '.jpg'
            ];
            let icon = '.' + file.name.split('.')[1];
            let isAcceptType = acceptTypes.includes(icon);
            if (!isAcceptType) {
                _this.$message.warning('请上传png或jpg格式的图片');
                return false;
            }
            let fileKB = file.size / 1024;
            if (fileKB <= 500) {
                return true;
            } else {
                this.$message.warning('请上传低于500KB的图片');
                return false;
            }
        },